Lecture 9

More canvas + Audio + Key events + Device Orientation

slides.com/jkohlin/tkpk18-lecture-9

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 object

Step 2: drawing image on canvas

The simple way:

var canvas = document.getElementById("stage")
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "birds.png";

ctx.drawImage(img, 0,0);

(birds.png is an image containing three birds with different wing positions)

The complicated way (cropping an image): 

var canvas = document.getElementById("stage")
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "birds.png";

ctx.drawImage(
    img,
    /*crop tool insert point:*/ 0, 24, 
    /*crop box width & height:*/34, 24, 
    /*placement on canvas:*/ 0, 24, 
    /*size on canvas:*/ 34, 24);

Draw image on canvas with original size:

​ctx.drawImage(imgObj, x, y);

 

Draw image on canvas with altered size

ctx.drawImage(imgObj, x, y, w, h);

 

Crop an image and draw in altered size:

ctx.drawImage(imgObj, cx, cy, cw, ch, x, y, w, h);

cx, cy - coordinates on original image defining top left corner of crop box
cw, ch - width and height of crop box
x, y - coordinates on canvas for cropped image's top left corner
w, h - desired width and height of the cropped image

How can you animate this bird?

make it fly!

Image sprite animation

var frames = [0, 24 ,48, 24]
var index = 0;

function fly(){
    ctx.drawImage(img, 0, frames[index++], 34, 24, 0, 0, 34, 24);
    if (index > 3) index = 0;
    setTimeOut(fly, 40); 
    /* requestAnimationFrame calls the function every 17 ms, 
    which is a bit too fast */
}

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

Adding text

fillStyle = color  
strokeStyle = color

 

font = "[font style] [font weight] [font size] [font face]"
textAlign = [left] / [center] / [right]
textBaseline = [top] [hanging] [middle] [alphabetic] [ideographic] [bottom]

 

fillText(message, x, y, maxwidth) -maxwidth is optional
strokeText(message, x, y, maxwidth)
measureText(message).width -returns the total width of the message
 

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

Audio

<audio src="music.mp3" id="sound" controls autoplay>

    No sound for you <br>
    Get new browser!

</audio>

all attributes

Audio

<audio src="music.mp3" id="sound" controls autoplay>

    No sound for you <br>
    Get new browser!

</audio>
var sound = document.getElementById("sound");
// or: var sound = new Audio("music.mp3");

// methods
sound.play();
sound.pause();

// properties can be read or written
sound.volume = 0.4; 
sound.controls = true;
sound.loop = true;

All properties, methods and events

Keyboard events

What key was pressed?

document.addEventListener("keydown", function(eventObj){
    console.log(eventObj.key);
});
Event Description
keydown When any key on the keyboard is pressed
keyup When any key on the keyboard is released
keypress Ignores Shift, Ctrl, Alt, Tab, Cmd, Win, Arrow keys 

Complete reference

Device orientation event

window.addEventListener("deviceorientation", handleOrientation, true);

function handleOrientation(event) {
  var alpha    = event.alpha; // 0 to 360
  var beta     = event.beta;  // -180 to 180
  var gamma    = event.gamma; // -90 to 90

  // Do stuff with the new orientation data
}

reference

Demo (mobile only)

https://kohlin.net/dg/deviceOrientation/