01. Drawing

const canvas1 = document.getElementById("myCanvas1");
const ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "#FF0000";
ctx1.fillRect(0, 0, 150, 75);

02. Coordinates

const canvas2 = document.getElementById("myCanvas2");
const ctx2 = canvas2.getContext("2d");
ctx2.moveTo(0, 0);
ctx2.lineTo(100, 150);
ctx2.stroke();

03. Gradient

const canvas3 = document.getElementById("myCanvas3");
const ctx3 = canvas3.getContext("2d");

const grd = ctx3.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "black");

ctx3.fillStyle = grd;
ctx3.fillRect(10, 10, 150, 80);

04. Text

const canvas4 = document.getElementById("myCanvas4");
const ctx4 = canvas4.getContext("2d");
ctx4.font = "36px Arial";
ctx4.fillText("Hello World", 15, 45);

05. Images

Original photo under CC BY 2.0 License

const canvas5 = document.getElementById("myCanvas5");
const ctx5 = canvas5.getContext("2d");
const img = new Image(180, 135); // Using optional size for image
img.onload = drawImageActualSize; // Draw when image has loaded

// Load an image of intrinsic size 1024x683 in CSS pixels
img.src = "fresh-raw-pork-meat-on-white-background.jpeg";

function drawImageActualSize() {
  // Use the intrinsic size of image in CSS pixels for the canvas element
  canvas5.width = this.naturalWidth;
  canvas5.height = this.naturalHeight;
  
  // Will draw the image as 1024x683, ignoring the custom size of 60x45
  // given in the constructor
  ctx5.drawImage(this, 0, 0);
  
  // To use the custom size we'll have to specify the scale parameters
  // using the element's width and height properties - lets draw one
  // on top in the corner:
  ctx5.drawImage(this, 0, 0, this.width, this.height);
}