Canvas Basic API Usage Tutorial

Introduction

Canvas is widely used and can be used as game engine, form document, editor, chart, drawing board, etc. Starting from the basic canvas API, combined with certain algorithms and functions, you can draw any effect you want and build more cool applications.

Draw Rectangle

Basic API

  • fillStyle
  • fillRect
  • strokeStyle
  • strokeRect
  • lineWidth
  • lineCap
  • lineJoin
  • clearRect
  • toDataURL

Code

The following shows the core js code

const canvas = document.getElementById("canvas");

// Confirm the browser Wisdom City canvas element
if (canvas.getContext) {
    // Get the canvas context
    const context = canvas.getContext("2d");

    // Set the fill to red
    // Any color value of css can be used: color name, hexadecimal code, rgb, rgba, hsl, hsla
    context.fillStyle = "#ff0000";

    // Draw a square and fill it with the red color set in the previous step
    // x coordinate 10, y coordinate 10, width 80, height 80
    context.fillRect(10, 10, 80, 80);

    // Set the stroke to green
    // Any color value of css can be used: color name, hexadecimal code, rgb, rgba, hsl, hsla
    context.strokeStyle = "green";

    // Set the stroke width, any integer
    context.lineWidth = 10;

    // Draw a square and use the green stroke set in the previous step
    // x coordinate 10, y coordinate 10, width 80, height 80
    context.strokeRect(10, 10, 80, 80);

    // Set the fill to be blue semi-transparent
    context.fillStyle = "rgba(0,0,255,0.5)";

    // Draw a rectangle and fill it with the blue translucent set in the previous step
    context.fillRect(50, 50, 80, 100);

    // Set the end style of the line
    /**
     * Flat head: butt
     * Round head: round
     * Square head: square
     * */
    context.lineCap = "square";

    // Set the way the lines intersect, the default is miter
    /**
     * Round: round
     * Oblique crossing: bevel
     * Miter: miter
     * */
    context.lineJoin = "round";

    // Set the stroke to blue
    context.strokeStyle = "blue";

    // Draw a rectangle and use the blue stroke set in the previous step
    context.strokeRect(50, 50, 80, 100);

    // Clear the rectangular area on the canvas
    // x coordinate 100, y coordinate 100, width 20, height 20
    context.clearRect(100, 100, 20, 20);

    // toDataURL converts canvas into a picture address in base64 string format
    const imgURI = canvas.toDataURL("image/png");
    const image = document.createElement("img");
    image.src = imgURI;
    document.body.appendChild(image);
}

Demo

For detailed implementation, please see the demo below

Draw Path

Basic API

  • arc(x,y,radius,startAngle,endAngle,counterclockwise)

    Draw an arc with (x, y) as the center. The radius of the arc is radius, and the start and end angles (in radians) are startAngle and endAngle, respectively. The last parameter indicates whether startAngle and endAngle are calculated in a counterclockwise direction, and a value of false means calculation in a clockwise direction.

  • arcTo(x1,y1,x2,y2,radius)

    Draw an arc from the previous point to (x2, y2), and pass through (x1, y1) with a given radius

  • bezierCurveTo(c1x,c1y,c2x,c2y,x,y)

    Draw a curve from the previous point to (x, y), and use (c1x, c1y) and (c2x, c2y) as the control points

  • lineTo(x,y)

    Draw a straight line from the previous point to (x,y)

  • moveTo(x,y)

    Move the drawing cursor to (x,y) without drawing a line

  • quadraticCurveTo(cx,cy,x,y)

    Draw a quadratic curve from the previous point to (x, y), and use (cx, cy) as the control point

  • rect(x,y,width,height)

    Draw a rectangle from the point (x, y), the width and height are specified by width and height respectively

Code

The following shows the core js code

// Draw a clock dial without numbers
const drawing = document.getElementById('canvas');

if (drawing.getContext) {
    const context = drawing.getContext('2d');
    // start path
    context.beginPath();

    // Draw the outer circle
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);

    // Draw the inner circle
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);

    // Draw the minute hand
    context.moveTo(100, 100);
    context.lineTo(100, 15);

    // draw the hour hand
    context.moveTo(100, 100);
    context.lineTo(35, 100);

    // Stroke path
    context.stroke();
}

Demo

For detailed implementation, please see the demo below

Reference

Comments