Question

How do you place a canvas element with an id of "canvas1: into a javascript variable

Answer 1

Answer:

Draw a Line

Example

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0, 0);

ctx.lineTo(200, 100);

ctx.stroke();

Try it Yourself »

Draw a Circle

Example

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95, 50, 40, 0, 2 * Math.PI);

ctx.stroke();

Try it Yourself »

Draw a Text

Example

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);

Try it Yourself »

Stroke Text

Example

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Hello World", 10, 50);

Try it Yourself »

Draw Linear Gradient

Example

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

Try it Yourself »

Draw Circular Gradient

Example

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

Try it Yourself »

Draw Image

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10);

Try it Yourself »