HTML Canvas CheatSheet

Canvas is an HTML element that is used to draw graphics, on the fly, via scripting (usually JavaScript). The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element.

The canvas is a rectangular area on an HTML page. By default, the canvas has no border and no content. The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it.

The <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering, the image is scaled to fit its layout size: if the CSS sizing doesn’t respect the ratio of the initial canvas, it will appear distorted.

Basic Setup

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
</script>

Basic Canvas API

• getContext(): This method returns a drawing context on the canvas, or null if the context identifier is not supported. The context identifier is a string that specifies the context type to be created. The following are the possible values:
  • 2d: Creates a CanvasRenderingContext2D object representing a two-dimensional rendering context.
  • webgl: Creates a WebGLRenderingContext object representing a three-dimensional rendering context.
  • webgl2: Creates a WebGL2RenderingContext object representing a three-dimensional rendering context with additional features.
  • bitmaprenderer: Creates a ImageBitmapRenderingContext object representing a two-dimensional rendering context that is used to draw an ImageBitmap.
  • gpupresent: Creates a GPUPresentationContext object representing a three-dimensional rendering context that is used to draw to a WebGPU presentation surface.
  • 2dwebgpu: Creates a GPUPresentationContext object representing a two-dimensional rendering context that is used to draw to a WebGPU presentation surface.
• fillStyle: This property sets or returns the color, gradient, or pattern used to fill the drawing. The default fillStyle is black.
• fillRect(): This method draws a filled rectangle on the canvas. The fillRect() method draws a “filled” rectangle. The default color of the fill is black.
• beginPath(): This method begins a path, or resets the current path.
• arc(): This method creates an arc/curve (used to create circles, or parts of circles).
• stroke(): This method actually draws the path you have defined with all those moveTo() and lineTo() methods. The default color is black.
• moveTo(): This method moves the path to the specified point in the canvas, without creating a line.
• lineTo(): This method adds a new point and creates a line to that point from the last specified point in the canvas.
• font: This property sets or returns the current font properties for text content on the canvas. The default font is 10px sans-serif.
• fillText(): This method draws “filled” text on the canvas. The default color of the text is black.
• drawImage(): This method draws an image, canvas, or video onto the canvas. The drawImage() method draws an image, canvas, or video onto the canvas. The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

// Change canvas size
canvas.width = 800;  // pixels
canvas.height = 600; // pixels

Transformations

// Save current state
ctx.save();                             

// Restore saved state
ctx.restore();                          

// Move canvas origin
ctx.translate(x, y);                    

// Rotate canvas
ctx.rotate(angleRadians);  

// Scale canvas
ctx.scale(scaleX, scaleY);           

// Transform matrix
ctx.transform(a, b, c, d, e, f);       

// Reset and transform
ctx.setTransform(a, b, c, d, e, f);    

Shadows

// Shadow color
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

// Shadow blur amount
ctx.shadowBlur = 5;                    

// Shadow X offset
ctx.shadowOffsetX = 5;                 

// Shadow Y offset
ctx.shadowOffsetY = 5;                  

Drawing a Rectangle

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 150, 100);
</script>

Drawing a Circle

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();
</script>

Drawing a Line

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
</script>

Drawing Text

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
</script>

Drawing an Image

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.src = "image.jpg";
    img.onload = function () {
        ctx.drawImage(img, 10, 10);
    };
</script>