i've been working on trying to animate the stars but i'm not sure how. I've tried using on multiple different techniques but at the end its still not working. it doesn't matter if you move that stars to much i just want them to move. any help would be appreciated thanks.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0, 102, 204)";
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.linewidth = 3;
//making the background
ctx.fillRect(0, 0, 1000, 900);
//making the grass
ctx.fillStyle = "rgb(178, 255, 102)";
ctx.fillRect(0, 620, 1000, 280);
// draw the stars
ctx.fillStyle = "rgb(255, 255, 153)";
ctx.beginPath();
ctx.moveTo(80, 120);
ctx.lineTo(100, 100);
ctx.lineTo(80, 80);
ctx.lineTo(60, 100);
ctx.lineTo(80, 120);
ctx.fill();
ctx.beginPath(); //star 2
ctx.moveTo(120, 220);
ctx.lineTo(140, 200);
ctx.lineTo(120, 180);
ctx.lineTo(100, 200);
ctx.lineTo(120, 220);
ctx.fill();
ctx.beginPath();// star 3
ctx.moveTo(60, 160);
ctx.lineTo(180, 40);
ctx.lineTo(160, 20);
ctx.lineTo(140, 40);
ctx.lineTo(160, 60);
ctx.fill();
ctx.beginPath();//star 4
ctx.moveTo(240, 140);
ctx.lineTo(260, 120);
ctx.lineTo(240, 100);
ctx.lineTo(220, 120);
ctx.lineTo(240, 140);
ctx.fill();
ctx.beginPath();//star 5
ctx.moveTo(300, 260);
ctx.lineTo(320, 240);
ctx.lineTo(300, 220);
ctx.lineTo(280, 240);
ctx.lineTo(300, 260);
ctx.fill();
ctx.beginPath();//star 6
ctx.moveTo(380, 180);
ctx.lineTo(400, 160);
ctx.lineTo(380, 140);
ctx.lineTo(360, 160);
ctx.lineTo(380, 180);
ctx.fill();
ctx.beginPath();//star 7
ctx.moveTo(460, 80);
ctx.lineTo(480, 60);
ctx.lineTo(460, 40);
ctx.lineTo(440, 60);
ctx.lineTo(460, 80);
ctx.fill();
ctx.beginPath();//star 8
ctx.moveTo(520, 160);
ctx.lineTo(540, 140);
ctx.lineTo(520, 120);
ctx.lineTo(500, 140);
ctx.lineTo(520, 160);
ctx.fill();
ctx.beginPath();//star 9
ctx.moveTo(620, 60);
ctx.lineTo(640, 40);
ctx.lineTo(620, 20);
ctx.lineTo(600, 40);
ctx.lineTo(620, 60);
ctx.fill();
ctx.beginPath();//star 10
ctx.moveTo(660, 180);
ctx.lineTo(680, 160);
ctx.lineTo(660, 140);
ctx.lineTo(640, 160);
ctx.lineTo(660, 180);
ctx.fill();
ctx.beginPath();//star 11
ctx.moveTo(600, 240);
ctx.lineTo(620, 220);
ctx.lineTo(600, 200);
ctx.lineTo(580, 220);
ctx.lineTo(600, 240);
ctx.fill();
ctx.beginPath();//star 12
ctx.moveTo(740, 80);
ctx.lineTo(760, 60);
ctx.lineTo(740, 40);
ctx.lineTo(720, 60);
ctx.lineTo(740, 80);
ctx.fill();
ctx.beginPath();//star 13
ctx.moveTo(820, 160);
ctx.lineTo(840, 140);
ctx.lineTo(820, 120);
ctx.lineTo(800, 140);
ctx.lineTo(820, 160);
ctx.fill();
</script>
</body>
</html>
Take a look at window.requestAnimationFrame.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var i = 0;
var speed = 500;
var drawStar = function (x, y) {
ctx.beginPath();
ctx.moveTo(80 + x, 120 + y);
ctx.lineTo(100 + x, 100 + y);
ctx.lineTo(80 + x, 80 + y);
ctx.lineTo(60 + x, 100 + y);
ctx.closePath();
ctx.fill();
};
var render = function () {
i += 1;
var offset = i % speed; // calculate how much the stars moved
ctx.fillStyle = "rgb(0, 102, 204)";
//making the background
ctx.fillRect(0, 0, 400, 300);
//making the grass
ctx.fillStyle = "rgb(178, 255, 102)";
ctx.fillRect(0, 200, 400, 100);
// draw the stars
ctx.fillStyle = "rgb(255, 255, 153)";
drawStar(offset, 0);
drawStar(offset + 100, 50);
drawStar(offset + 160, 20);
window.requestAnimationFrame(render); // call render again in about 33ms
};
render(); // call render for the first time
<canvas id="myCanvas" width="400" height="300"></canvas>
Related
I'm trying to modify some getElementById code I found on the internet to write a function that uses a switch/case statement so that I can draw different shapes using the same function. Basically, I want to create a tiny state machine for shape drawing commands. JavaScript is still new to me, so I'm probably missing something glaringly obvious. Cheers!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a circle</title>
<script src="draw_shapes.js"></script>
</head>
<body onload="draw01();">
<canvas id="circle" width="150" height="150"></canvas>
</body>
</html>
draw_shapes.js
function draw01() {
var canvas = document.getElementById('circle');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 45;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#000000';
ctx.stroke();
}
}
function draw02() {
const canvas = document.getElementById(canvas.id);
const ctx = canvas.getContext('2d');
switch (canvas.id) {
case "circle":
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 45;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = '#000000';
ctx.stroke();
break;
}
}
Second iteration. Still not quite working right, but I've got the setup more as I was envisioning.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a circle</title>
<script src="draw_shapes_02.js"></script>
</head>
<body onload="draw(CIRCLE);">
</body>
</html>
draw_shapes_02.js
//shape enumeration (an object with constant variables with immutable property values)
const shapes = {
CIRCLE: "circle",
RECTANGLE: "rectangle",
TRIANGLE: "triangle",
HOUSE: "house",
DEFAULT:"default",
}
Object.freeze(shapes);
// shape default setting and error
let shape = shapes.DEFAULT;
if (!shape) {
throw new Error("Shape is not defined");
}
// shape state machine
function draw(shapes) {
var canvas = document.getElementById("shape");
var ctx = canvas.getContext('2d');
switch ("shape") {
case shapes.CIRCLE:
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(150, 60, 50, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
break;
case shapes.RECTANGLE:
ctx.beginPath();
ctx.fillStyle = "green";
ctx.rect(100, 130, 100, 50);
ctx.fill();
ctx.closePath();
break;
case shapes.TRIANGLE:
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.moveTo(150, 200);
ctx.lineTo(200, 250);
ctx.lineTo(100, 250);
ctx.lineTo(150, 200);
ctx.fill();
ctx.closePath();
break;
case shapes.HOUSE:
ctx.lineWidth = 10;
ctx.strokeRect(75, 140, 150, 110);
ctx.fillRect(130, 190, 40, 60);
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
break;
case shapes.DEFAULT:
break;
}
}
I have simplified a bit but you can complicate again as you wish :)
function draw(shape) {
var canvas = document.getElementById("CIRCLE");
var ctx = canvas.getContext('2d');
console.log(shape);
switch (shape) {
case "CIRCLE":
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(150, 60, 50, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
break;
case "RECTANGLE":
ctx.beginPath();
ctx.fillStyle = "green";
ctx.rect(100, 130, 100, 50);
ctx.fill();
ctx.closePath();
break;
case "TRIANGLE":
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.moveTo(150, 200);
ctx.lineTo(200, 250);
ctx.lineTo(100, 250);
ctx.lineTo(150, 200);
ctx.fill();
ctx.closePath();
break;
case "HOUSE":
ctx.lineWidth = 10;
ctx.strokeRect(75, 140, 150, 110);
ctx.fillRect(130, 190, 40, 60);
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
break;
default:
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
break;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a circle</title>
</head>
<body onload="draw('HOUSE');">
<canvas width="240" height="297" style="border:1px solid #d3d3d3;" id="CIRCLE"></canvas>
</body>
</html>
I am trying to implement this post, which draws and animates a stick figure, into Vue.
draw(timestamp, wave) {
if(Date.now() < (timestamp+900)) return requestAnimationFrame(this.draw);
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if(wave) {
context.moveTo(200, 100);
context.lineTo(250, 130);
wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
wave = true;
}
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
timestamp = Date.now();
requestAnimationFrame(this.draw);
}
},
mounted: function () {
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object
let timestamp = Date.now();
let wave = false;
this.draw(timestamp, wave);
}
If I do the entire draw method inside of my mounted method, it works. But when I move draw to it's own method, as shown above, it fails.
I know it's failing because the line if(Date.now() < (timestamp+900)) is always returning false when running the code above. But I'm not sure why that's happening, or what the difference is.
How can I get this canvas to animate?
Here's an example of how this might look in a component.
Vue.component('canvas-demo', {
data: function () {
return {
timestamp: Date.now(),
wave: false
}
},
mounted: function(){
this.startDrawing(this.$el.getContext("2d"));
},
template: '<canvas></canvas>',
methods: {
startDrawing: function(context) {
var draw = () => {
if (Date.now() < (this.timestamp + 900)) return requestAnimationFrame(draw);
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle
context.beginPath();
context.lineWidth = 6;
context.stroke();
//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();
//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if (this.wave) {
context.moveTo(200, 100);
context.lineTo(250, 130);
this.wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
this.wave = true;
}
context.stroke();
//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
this.timestamp = Date.now();
requestAnimationFrame(draw);
}
draw();
}
}
});
new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<canvas-demo></canvas-demo>
</div>
I'm a newbie in canvas drawing. I want to draw the PV string model and the direction of flow of electrons into <canvas> tag.
This is what I want to achieve, redrawing the lines from the following direction:
How do I initially set the animation location, and do I need to update it via setTimeout?
Here is what I try so far:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
/* First Row */
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(50, 50, 50, 50);
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(110, 50, 50, 50);
ctx.fillStyle = "rgb(188,12,50, 1)";
ctx.fillRect(170, 50, 50, 50);
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(230, 50, 50, 50);
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(290, 50, 50, 50);
/* Second Row */
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(50, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(110, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(170, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(230, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(290, 150, 50, 50);
/* Paths */
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "rgb(34,177,76, 1)";
ctx.moveTo(0, 75);
ctx.lineTo(400, 75);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "rgb(34,177,76, 1)";
ctx.moveTo(400, 75);
ctx.lineTo(400, 175);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "rgb(34,177,76, 1)";
ctx.moveTo(0, 175);
ctx.lineTo(400, 175);
ctx.stroke();
} else {
// canvas-unsupported code here
}
/* canvas {
border: 1px solid #d3d3d3;
} */
<canvas id="myCanvas" width="400" height="400">
Your browser does not support the HTML5 canvas tag.</canvas>
Any help would be appreciated!
There are many ways to animate this; here's my approach (excerpt; see
JSFiddle for full code):
var lerp = (a, b, t) => a + t * (b - a);
var speed = 0.01;
var time = 0;
var visited = [];
var points = [
{
from: { x: 0, y: 75 },
to: { x: 395, y: 75 }
},
{
from: { x: 395, y: 75 },
to: { x: 395, y: 175 }
},
{
from: { x: 395, y: 175 },
to: { x: 0, y: 175 }
}
];
/* Paths */
ctx.lineWidth = 3;
ctx.strokeStyle = "rgb(34, 177, 76, 1)";
(function update() {
if (points.length) {
visited.push({
x: lerp(points[0].from.x, points[0].to.x, time),
y: lerp(points[0].from.y, points[0].to.y, time)
});
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBoxes(ctx);
ctx.beginPath();
ctx.moveTo(visited[0].x, visited[0].y)
visited.forEach(e => ctx.lineTo(e.x, e.y));
ctx.stroke();
time += speed;
if (time >= 1) {
time = 0;
points.shift();
}
requestAnimationFrame(update);
}
})();
The idea is to keep a data structure of all the turning points, then lerp along the path, drawing a line along the way. Use an easing function instead of lerp if you prefer a more "modern"-looking animation; easing is usually easier to implement and may result in removal of some code (for example, no need to keep track of starting points and time).
Last minor note--your original code was cutting off the line at the right edge of the canvas, so I took the liberty of using 395 instead of 400 for the drawing width.
I am attempting to animate an emoticon that was previously drawn in canvas. I am attempting to do a draw and clear using frames following a tutorial but am not getting results. I have 6 frames of the emoticon coded and am unsure how to include this within the code. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Adding Animation</title>
<style>
canvas {
border: 3px #CCC solid;
}
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" height="1200" width="900"></canvas>
</div>
<script>
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function drawCircle() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
mainContext.fillStyle = "#EEEEEE";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
// draw the circle
ctx.beginPath();
ctx.strokeStyle = "000000";
ctx.lineWidth = 5;
ctx.fillStyle = "yellow";
ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
//The smile
ctx.beginPath();
ctxstrokeStyle = "black";
ctx.lineWidth = 2;
ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
ctx.stroke();
ctx.closePath();
//The eyes
//Left
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(850, 405, 40, 0 * Math.PI, Math.PI * 2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//Right
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore()
}
drawCircle();
</script>
</body>
</html>
I am unsure if I am even on the right track as I have a difficult time with animation. Does anyone have any suggestions they can give me guidance on?
You have 2 names for the context: mainContext & ctx.
Change it to a single name and your face is "smiley" ! :-)
...
To animate:
Use a requestAnimationFrame loop to change the scaleY value in scale(scaleX,scaleY) over time.
Here's annotated code and a Demo:
var mainCanvas = document.querySelector("#myCanvas");
var ctx = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
ctx.translate(-425,-275);
drawCircle(1);
// global var to hold pct the left eye is open
// 1==fully open, 0==fully closed
var scaley=1;
var direction=-1;
// request 1 animate() loop
requestAnimationFrame(animate);
function animate(time){
// draw smiley with the specified eye openness
drawCircle(scaley);
scaley+=.02*direction;
if(scaley<0){
scaley=0;
direction=1;
}
if(scaley>1){
scaley=1;
direction=-1;
}
requestAnimationFrame(animate);
}
function drawCircle(scaleY) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
ctx.fillStyle = "#EEEEEE";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
// draw the circle
ctx.beginPath();
ctx.strokeStyle = "000000";
ctx.lineWidth = 5;
ctx.fillStyle = "yellow";
ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
//The smile
ctx.beginPath();
ctxstrokeStyle = "black";
ctx.lineWidth = 2;
ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
ctx.stroke();
//The eyes
//Left
ctx.save();
// move the [0,0] origin to the left eye's centerpoint
ctx.translate(550,405);
// close the left eye by the specified scaleY
ctx.scale(0.65, scaleY);
ctx.beginPath();
// draw the left eye (arc) at 0,0 because
// we translated the origin to [550,405] earlier
ctx.arc(0, 0, 40, 0 * Math.PI, Math.PI * 2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//Right
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore()
}
<canvas id="myCanvas" height="1200" width="900"></canvas>
You never declared a ctx variable.
Change all your mainContext by ctx and it should be working fine.
Hi I have following script, but when I run it in Chrome I dont see the result.
What did I miss? What do I have to add to html to see my results.
<script>
noStroke();
var leftX = 145;
var rightX = 274;
var sunRadius = 100;
var draw = function() {
background(184, 236, 255);
fill(255, 170, 0);
ellipse(200, 100, sunRadius, sunRadius);
// clouds
fill(255, 255, 255);
// left cloud
ellipse(leftX, 150, 126, 97);
ellipse(leftX+62, 150, 70, 60);
ellipse(leftX-62, 150, 70, 60);
// right cloud
ellipse(rightX, 100, 126, 97);
ellipse(rightX+62, 100, 70, 60);
ellipse(rightX-62, 100, 70, 60);
leftX--;
rightX++;
sunRadius+=2;
};
</script>
Whatever noStroke (and other functions like fill and `background) are, make sure they're defined in your code, or else the rest of the function won't execute.
The reason that your function isn't being callled... Is because you're not calling it.
Add a call to draw after the function is declared. The end of the code should look like:
leftX--;
rightX++;
sunRadius+=2;
};
draw(); //Actually run the function
I think ellipse is new for canvas. I found a function for backwards compatibility on github.
var can = document.getElementById('can');
var ctx = can.getContext('2d');
var leftX = 145;
var rightX = 274;
var sunRadius = 100;
draw();
function draw() {
ctx.fillStyle = "rgb(184, 236, 255)";
ctx.fillRect(0, 0, can.width, can.height);
ctx.beginPath();
ellipse(200, 100, sunRadius, sunRadius);
ctx.fillStyle = "rgb(255, 170, 0)";
ctx.fill();
// clouds
ctx.fillStyle = "rgb(255, 255, 255)";
// left cloud
ctx.beginPath();
ellipse(leftX, 150, 126, 97);
ellipse(leftX + 62, 150, 70, 60);
ellipse(leftX - 62, 150, 70, 60);
ctx.fill();
// right cloud
ctx.beginPath();
ellipse(rightX, 100, 126, 97);
ellipse(rightX + 62, 100, 70, 60);
ellipse(rightX - 62, 100, 70, 60);
ctx.fill();
leftX--;
rightX++;
sunRadius += 2;
};
function ellipse(cx, cy, w, h) {
var rx = w / 2;
var ry = h / 2;
var rot = 0;
var aStart = 0;
var aEnd = Math.PI * 2;
florianEllipse(ctx, cx, cy, rx, ry, rot, aStart, aEnd);
}
function florianEllipse(context, cx, cy, rx, ry, rot, aStart, aEnd){
context.save();
context.translate(cx, cy);
context.rotate(rot);
context.translate(-rx, -ry);
context.scale(rx, ry);
context.arc(1, 1, 1, aStart, aEnd, false);
context.restore();
}
<canvas id="can" width="400" height="300"></canvas>