HTML 5 Animation : Draw the Car and Move forward and backward with arrow keys

Draw the Car and Move forward and backward with arrow keys

Use the keywords arrow keys to run the Car

Author: Hirendra Sisodiya
Title: Draw the Car and Move forward and backward with arrow keys
Applies To: HTML5, Canvas element, JavaScript

Draw Objects
Upper body of car:
Bezier Curves, Quadratic Curve, Lines, Linear gradient
Wheels of the car:
Radial gradient, Arcs
Windows of the car: Linear Gradient

Move Object
Move car: Context translate, Restore and Save() functions

Try your self

After learn the code, you can try to draw some other objects and create the animation on the car like as:
– Draw the Right hand window mirror
– Draw the handle of the door
– Create the animation to rotate the wheels of the car.

Complete source code

<!DOCTYPE html>
<html><head>
    <title>Draw and move the car object In HTML5</title>
    <!– Written by Hirndra sisodiya  for the authorcode.com–>
 
    <script>
        var myImage = new Image();
        var back = new Image();
        var ctx;
        function displayImage() {
            canvas = document.getElementById("myCanvas");
            if (canvas.getContext) {
                ctx = canvas.getContext("2d");
                window.addEventListener('keydown', moveobj, true);
 
		// BODY
                ctx.beginPath();
                ctx.moveTo(25, 150);
		ctx.bezierCurveTo(50, 130, 60, 120, 70, 120);
		ctx.moveTo(70, 120);
		ctx.lineTo(120, 120);
		ctx.bezierCurveTo(140, 130, 130, 125, 160, 150);
		ctx.quadraticCurveTo(190,160,190,180);
		ctx.lineTo(5, 180);
		ctx.quadraticCurveTo(5,150,25, 150);
		ctx.closePath();
 
		var grd = ctx.createLinearGradient(120, 130, 120, 180);
		grd.addColorStop(0, '#FF0000');   
		grd.addColorStop(1, '#AE0000');
 
                ctx.fillStyle = grd;
                ctx.fill();
                ctx.beginPath();
                ctx.rect(5, 180, 185,7);
		ctx.fillStyle = "#4B4B4B";
                ctx.fill();
 
		// WINDOW
		ctx.beginPath();
		ctx.moveTo(75, 125);
		ctx.lineTo(115, 125);
		ctx.lineTo(130, 150);
		ctx.lineTo(60, 150);
		ctx.closePath();
		var grd = ctx.createLinearGradient(70, 125, 130, 150);
		grd.addColorStop(0, '#bbb');   
		grd.addColorStop(1, '#696969');
		ctx.fillStyle = grd;
		ctx.fill();
 
		ctx.moveTo(56, 125);
		ctx.lineTo(72, 125);
		ctx.lineTo(55, 150);
		ctx.lineTo(25, 150);
		ctx.closePath();
		var grd = ctx.createLinearGradient(50, 135, 100, 135);
		grd.addColorStop(0, '#bbb');   
		grd.addColorStop(1, '#696969');
		ctx.fillStyle = grd;
		ctx.fill();
 
		// WHEELS
		ctx.beginPath();
		var gradient = ctx.createRadialGradient(50, 180, 2, 50,180, 15);
		gradient.addColorStop(0, 'white');
		gradient.addColorStop(1, '#3C3C3C');
                ctx.arc(50, 180, 15,0, 2 * Math.PI, true);
                ctx.fillStyle = gradient;
                ctx.fill();
 
                ctx.beginPath();
		gradient = ctx.createRadialGradient(140, 180, 2, 140,180, 15);
		gradient.addColorStop(0, 'white');
		gradient.addColorStop(1, '#3C3C3C');
                ctx.arc(140, 180, 15,0, 2 * Math.PI, true);
		ctx.fillStyle = gradient;
                ctx.fill();
            }
        }
 
        var old = new Image();
        var next = 0;
        function moveobj(evt) {
            ctx.fillStyle = "#ffffff";
            ctx.rect(3, 5, 600, 350);
            ctx.fill();
            switch (evt.keyCode) {
                case 37:
                    ctx.restore();
                    displayImage();
                    break;
                case 39:
                    ctx.save();
                    ctx.translate(5, 0);
                    displayImage();
                    break;
            }
        }
        function clickhere() {
            document.getElementById("span").innerHTML = "Use the right and left arrow keys";
        }
       </script>
  </head>
    <body onload="displayImage()">
<input id="Button1" type="button" value="Start the car" align="center" onclick="clickhere();">
<span id="span"></span><br>
       <canvas id="myCanvas" width="600px" height="330px">
    </canvas>
</body></html>

3 thoughts on “Draw the Car and Move forward and backward with arrow keys”