Lecture 8

the canvas element, and animation

slid.es/jkohlin/js-8

What to read?

chapter 7

Chapter 9

Events & Timers

Animation

( move, delay, repeat )

Delay

Schedule a function invocation

requestAnimationFrame(callback) // modern, better

setTimeout(callback, 1000/144)  // old-school method

setInterval(callback, 1000)    // infinite loop

pass a function

to a function

and call it in a while

requestAnimationFrame(callback)

What if you need to cancel?

 

 
var scheduleId = requestAnimationFrame(callback);

if(fun == false) {
    cancelAnimationFrame(scheduleId);
}

repeat

Re-schedule a function invocation. Over and over

function animationLoop(){
    // change something, then repeat (with delay)
    requestAnimationFrame( animationLoop ) 
}

animationLoop() // kickstart the function

the canvas element

The canvas element is just an empty container with a width and a height. 

<canvas width="300" height="150" id="myCanvas">

  I'm sorry about your browser, it's not very good.
  But hey, they got new ones at google.com/chrome.
  <img src="images/sad_emoji.png" alt="">

</canvas>

the canvas context object

...however is where the cool stuff is.

<canvas width="300" height="150" id="myCanvas">

  I'm sorry about your browser, it's not very good.
  But hey, they got new ones at google.com/chrome.
  <img src="images/sad_emoji.png" alt="">

</canvas>

HTML

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

JavaScript

canvas {
    background-image: url(game_bg.png);
    background-size: cover;
}

CSS

The basic setup

 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
<canvas width="640" height="480" id="myCanvas">

</canvas>

Drawing rectangles

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

// ctx.fillRect(startX, startY, width, height)
ctx.fillRect(0, 0, 100, 50);

ctx.strokeRect(w/2, h/2, 50, 75);

lines

http://codepen.io/jkohlin/pen/RGGYwa

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.closePath();
ctx.stroke();
ctx.fill();

Styling

ctx.save()    //saves the default state
ctx.fillStyle=color
ctx.strokeStyle=color 
ctx.lineWidth=number  

ctx.lineCap="butt"    
ctx.lineJoin="miter"  
ctx.miterLimit=integer

ctx.restore() //resets to the last saved state


// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore

circles

beginPath() //starts drawing a a path.
arc(startX, startY, radius, startAngle, endAngle) 
//draws a circle where 2*Math.PI is the end angle in radians for a full circle
stroke() //adds a stroke to your shape
fill() //fills your shape

Save as image

var imgData = canvas.toDataURL("image/png");

document.querySelector('a').href = imgData
document.querySelector('img').src = imgData
<canvas width="200" height="200"></canvas>
<img src="" alt="Canvas goes here" width="400" height="400">
<a href="">download canvas as Image</a>

animate

erase, move, draw, repeat

http://codepen.io/jkohlin/pen/ZeMRBx

var canvas = document.getElementById("star");
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
var w = canvas.width;
var h = canvas.height;

function update(){
    ctx.clearRect(0,0,w,h);
    ctx.fillRect(x,y, 20,20);
    x++; 
    y++;
    requestAnimationFrame(update)
}

update();

THINGS YOU WANT TO DO

on the loop

 

  • Updating the sprite frame
  • Updating the position
  • Making responses to events
  • Removing enemies
  • Adding enemies
  • Adding bullets
  • Checking if bullets collide with enemies
  • Updating backgrounds positions
  • Etc...

Drawing images on Canvas

 

1. The image object can be in your HTML

<body>
    <img src="birds.png" id="bird-pic" width="34" height="72">
</body>

2. Or you can create one in JS

var img = new Image();
img.src = "birds.png";

var img = document.getElementById("bird-pic");

Step 1: creating the image source object

Step 2: drawing the image to canvas

The simple way:

var img = new Image();
img.src = "birds.png";

ctx.drawImage(img, 0,0); 
//(imageSource, startX, startY)

Step 2: drawing the image to canvas

The simple way:

var img = new Image();
img.src = "birds.png";

//ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
ctx.drawImage(img, 50, 70, 50, 50, 0, 0, 100, 100)

Animation and canvas

By Johan Kohlin

Animation and canvas

  • 990

More from Johan Kohlin