lock a canvas html javascript code example

Example 1: Javascript clear canvas

var canvas = document.getElementById("myCanvasID");
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height); //clear html5 canvas

Example 2: javascript canvas beziercurveto

let start = {x: 100, y: 100};
let controlPoint1 = {x: 100, y: 200};
let controlPoint2 = {x: 200, y: 200};
let endPoint = {x: 200, y: 100};

ctx.moveTo(start.x, start.y); //Move to start point
ctx.bezierCurveTo(
  controlPoint1.x, controlPoint1.y,
  controlPoint2.x, controlPoint2.y,
  endPoint.x, endPoint.y
); //Draw curve
ctx.stroke(); //Draw outline

Example 3: javascript canvas

#this code creates a circle within a canvas that must be created in HTML
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Tags:

Html Example