In my previous tutorial I have created an animated line on the HTML5 canvas and in this tutorial I am going to further demonstrate the latest technique which I have developed by drawing a cartoon on HTML5 canvas. Draw an animated straight line on the canvas is really simple but to draw a cartoon on the canvas is not that easy, although the entire concept of the code is still the same but we will really need to figure it out which point goes where in order to get our cartoon drawing right, therefore this time we will need a special tool to help us finding out all those coordinate points for our cartoon, if you are a Chrome browser user then you can download Bear Draws and get all the coordinate points you need for this drawing program. If you are using other browser than Chrome then you will need to figure it out a method to get all those points you need for drawing the cartoon on the canvas. Basically the code below is the same as before and the only new thing here is an array to keep all those x-y points we need in order to draw the animated cartoon.
var canvas;
var context;
var count = 0;
var inter;
var xyPoints = [[166,76],[167,76],[168,76],[169,76],[170,76]
,[174,76],[178,76],[181,76],[182,76]
,[184,77],[186,77],[187,77],[188,78]
,[191,78],[192,79],[194,79],[196,81]
,[199,82],[203,84],[204,85],[205,85]
,[206,86],[207,87],[207,88],[208,88]
,[209,89],[209,90],[209,91],[209,94]
,[209,95],[210,97],[210,99],[211,101]
,[211,103],[211,104],[211,105],[211,106]
,[211,107],[211,108],[211,109],[211,110]
,[211,112],[211,113],[211,114],[211,115]
,[211,116],[211,117],[211,118],[211,119]
,[211,120],[211,121],[211,124],[211,126]
,[211,127],[211,128],[211,129],[211,130]
,[211,129],[213,127],[214,126],[214,124]
,[215,123],[216,120],[217,119],[218,117]
,[220,115],[222,114],[223,114],[224,114]
,[226,114],[229,114],[233,115],[235,116]
,[238,118],[239,119],[242,120],[243,120]
,[246,122],[249,124],[251,126],[252,128]
,[253,130],[254,131],[254,132],[255,133]
,[255,136],[256,138],[257,140],[257,141]
,[257,145],[257,146],[257,151],[257,154]
,[255,157],[253,162],[252,164],[251,167]
,[250,168],[248,172],[247,175],[245,176]
,[244,177],[243,180],[242,181],[240,182]
,[238,182],[237,182],[233,182],[228,181]
,[226,180],[224,179],[224,178],[224,177]
,[224,178],[225,180],[227,182],[229,186]
,[230,188],[231,189],[231,190],[231,191]
,[231,193],[231,195],[231,196],[231,198]
,[231,200],[231,202],[231,203],[230,206]
,[229,208],[229,207],[229,205],[228,204]
,[227,204],[222,204],[218,204],[217,204]
,[213,204],[209,204],[206,206],[204,207]
,[204,211],[204,215],[204,219],[204,223]
,[204,226],[205,229],[212,236],[215,238]
,[219,239],[222,240],[226,240],[230,240]
,[235,237],[238,235],[240,233],[241,232]
,[242,233],[243,237],[243,240],[245,243]
,[246,250],[247,258],[247,268],[247,272]
,[247,276],[247,280],[246,287],[244,290]
,[241,295],[239,298],[237,300],[236,302]
,[234,304],[229,306],[227,306],[222,306]
,[216,306],[209,306],[205,306],[200,306]
,[193,304],[188,300],[183,296],[181,294]
,[180,293],[180,294],[178,299],[178,304]
,[176,309],[175,313],[174,316],[172,319]
,[170,321],[168,325],[167,325],[166,325]
,[164,325],[157,324],[151,324],[143,324]
,[137,324],[132,324],[129,324],[124,324]
,[117,324],[112,324],[105,324],[100,324]
,[95,324],[95,323],[94,320],[92,317],[92,315]
,[91,312],[90,307],[90,302],[90,297],[90,292]
,[89,288],[89,287],[89,282],[89,281],[90,280]
,[90,279],[90,278],[86,273],[78,267],[76,265]
,[73,261],[72,256],[67,249],[63,244],[61,239]
,[58,232],[57,225],[55,218],[55,213],[55,207]
,[54,201],[54,196],[54,191],[54,186],[54,181]
,[54,173],[56,165],[58,158],[61,152],[61,146]
,[64,139],[66,130],[68,122],[70,114],[71,110]
,[71,108],[74,103],[74,101],[69,87],[67,77]
,[67,70],[67,68],[68,65],[71,62],[75,62],
[84,63],[91,67],[96,75],[96,74],[95,61],[95,52]
,[95,45],[97,42],[98,40],[99,40],[106,41],
[107,42],[113,46],[117,53],[119,56],[123,60]
,[126,63],[127,63],[127,59],[127,50],[128,42]
,[130,38],[132,34],[133,32],[134,31],[136,31]
,[137,31],[141,31],[155,39],[160,42],[162,45]
,[165,52],[165,53],[166,57],[167,61],[167,65]
,[167,66],[167,69],[166,70],[166,71],[166,74]
,[166,78],[166,79],[167,81],[168,81],[170,80]
,[171,80],[177,80],[181,80],[188,80],[189,81]
,[197,85],[203,87],[204,89],[205,91],[206,92]
,[207,93],[208,94],[209,95],[209,97],[211,101]
,[212,103],[212,107],[212,108],[212,110],
[212,111],[211,113],[211,115],[209,119],
[209,118],[209,113],[207,111],[206,110],
[198,107],[195,106],[186,104],[181,104],
[175,104],[173,104],[167,104],[163,104],
[161,104],[152,104],[147,106],[141,109]
,[137,113],[133,119],[130,126],[130,131]
,[133,140],[138,148],[143,151],[157,156]
,[166,158],[170,158],[184,158],[195,158]
,[202,155],[208,152],[212,147],[214,144]
,[215,137],[215,132],[213,125],[213,122]
,[211,117],[208,115],[207,114],[206,114]
,[205,114],[195,110],[188,108],[180,106]
,[175,106],[166,108],[160,112],[158,120]
,[158,130],[161,137],[166,144],[171,150]
,[178,151],[184,152],[196,153],[201,153]
,[206,149],[207,148],[208,146],[210,144]
,[210,139],[210,138],[210,134],[207,130]
,[205,124],[204,121],[202,121],[198,119]
,[194,117],[193,117],[188,117],[183,118]
,[181,119],[178,123],[178,130],[179,138]
,[184,145],[185,148],[190,152],[192,153]
,[198,153],[200,153],[208,152],[212,147]
,[213,143],[212,138],[207,135],[200,128]
,[199,128],[198,128],[186,131],[184,134]
,[184,141],[186,145],[192,148],[195,149]
,[200,150],[203,151],[206,151],[208,150],[210,150],[212,147],[211,147]];
var points = {
linePoint : []
};
function Point(x,y) {
this.x = x;
this.y = y;
}
function entPoints() {
for(var i = 0; i < xyPoints.length; i++) {
var x = xyPoints[i][0];
var y = xyPoints[i][1];
points.linePoint.push(new Point(x,y));
}
inter = setInterval("drawPoints()",69);
}
function drawPoints() {
canvas = document.getElementById('draws');
context = canvas.getContext("2d");
context.strokeStyle = "#C9BE62";
context.lineWidth = 5;
context.shadowColor='rgba(0,0,0,0.9)';
context.shadowOffsetX=6;
context.shadowOffsetY=6;
context.shadowBlur=13;
if(count == 0) {
context.beginPath();
context.moveTo(points.linePoint[count].x,
points.linePoint[count].y);
} else {
context.moveTo(points.linePoint[count-1].x,
points.linePoint[count-1].y);
context.lineTo(points.linePoint[count].x,
points.linePoint[count].y);
}
context.stroke();
count++;
if(count == xyPoints.length) {
clearInterval(inter);
}
}
window.addEventListener('load', entPoints, false);
Don’t forget to insert below tag anywhere within the body of the html5 file.
<canvas id="draws" width="453" height="453">
Your browser does not support HTML5 Canvas.
</canvas>
Looks familiar isn’t it? Actually it is not much different than the previous one but the difficult part is how to fill in those x and y coordinate points of the xyPoints array. After we have solved the coordinate point’s problem then the rest of the code is just to slowly draw out each point on the canvas just like the previous example. So again if you are using Chrome browser then you really will love Bear Draws. All you need is to draw on Bear Draws and then copy the coordinate points generate by the application and replace those points within the xyPoints array from the above code with your own to see the different effect by yourself. Alright, so much for that, now lets try the code out, click on the start button below to see the code in action.