HTML5 Canvas Drawing

varcanvas=document.querySelector(‘canvas’);

canvas.height=window.innerHeight;

canvas.width=window.innerWidth;

varc=canvas.getContext(“2d”);

//rectangle

c.fillStyle = “rgba(255, 0, 0, 0.8)”;

c.fillRect(100,100,11,11);

c.fillStyle = “rgba(255, 240, 0, 0.8)”;

c.fillRect(200,100,11,11);

// Filled triangle

c.fillStyle = “rgba(0, 255, 0, .9)”;

c.beginPath();

c.moveTo(25,25);

c.lineTo(105,25);

c.lineTo(25,105);

c.fill();

// line

c.beginPath();

c.moveTo(50, 22);

c.lineTo(111,333);

c.lineTo( 222, 222);

c.strokeStyle = “#fa34a4”;

c.stroke();

// arc / circle

c.beginPath();

c.arc(300, 100, 30, 0 , Math.PI * 2, false);

c.strokeStyle = “rgba(0, 0, 255, .9)”;

c.stroke();

Knowledge Base