WEB PROGRAMMING

CANVAS, ANIMATIONS, APIS

Győző Horváth
associate professor
gyozo.horvath@inf.elte.hu

1117 Budapest, Pázmány Péter sétány 1/c., 2.408

Tel: (1) 372-2500/8469

1
RECAP

2
 RECAP
JavaScript language elements
DOM programming
Event management details
Code organization
Timers
Forms, images, tables
JavaScript built-in objects

3
CANVAS API

4
GRAPHICS POSSIBILITIES IN BROWSERS
Images
CSS
(Inline) SVG (vector graphics)
Canvas (raster graphics)

5
 CANVAS
<canvas width="200" height="200"></canvas>

// Select canvas element

const canvas = document.querySelector('canvas');
// 2D drawing context
const context = canvas.getContext('2d');

Reference

6
CANVAS COORDINATE SYSTEM

Coordinate system

7
 DRAWING WITH SHAPES AND IMAGES
CanvasRenderingContext2D methods:

Text ( fillText , strokeText )

Rectangle ( fillRect , strokeRect )
Image ( drawImage )
Source: image, canvas, video
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy,
dWidth, dHeight)
Deletion ( clearRect )
Reference

8
DRAWING WITH PATHS
beginPath
closePath
fill
stroke
rect
ellipse
arc
moveTo
lineTo
bezierCurveTo
quadraticCurveTo

9
 DRAWING WITH PATHS
context.fillRect(5, 5, 20, 100);
context.strokeRect(30, 5, 20, 100);

context.beginPath();
context.rect(110, 5, 20, 100);
context.moveTo(130, 5);
context.lineTo(160, 35);
context.lineTo(130, 65);
context.stroke();

context.beginPath();
context.arc(200, 50, 30, 0, 2 * Math.PI);
context.fill();

context.beginPath();
context.moveTo(5, 200);
context quadraticCurveTo(55, 100, 105, 200);

10
 SETTINGS
Kitöltés színe/mintázata ( fillStyle )
Vonal színe ( strokeStyle )
Vonal vastagsága ( lineWidth )
Vonalak vége ( lineCap )
Vonalak illesztése ( lineJoin )
Áttetszőség ( globalAlpha )
Egyesítés és vágás

11
 EXAMPLE
const plane = document.createElement('img')
plane.src = 'plane.png'
plane.addEventListener('load', draw)
function draw() {
const gradSky = ctx.createLinearGradient(200, 0, 200, 300)
gradSky.addColorStop(0, 'lightblue')
gradSky.addColorStop(0.5, 'orange')
gradSky.addColorStop(1, '#444444')

const gradMountain = ctx.createLinearGradient(200, 60, 200, 3

gradMountain.addColorStop(0, 'white')
gradMountain.addColorStop(0.2, 'white')
gradMountain.addColorStop(0.7, '#5555aa')
gradMountain.addColorStop(1, 'green')

ctx.fillStyle = gradSky
ctx fillRect(0, 0, 400, 300)

12
TRANSFORMATIONS
Operations
rotate
scale
translate
transform
State management
save
restore

13
 TRANSLATION
context.translate(100, 100);

14
 SCALE
context.scale(2, 2);

15
 ROTATION
context.rotate(Math.PI / 4);

16
 COMPLEX TRANSFORMATION
context.translate(100, 100);
context.rotate(-Math.PI / 4);
// Draw something
context.rotate(Math.PI / 4);
context.translate(-100, -100);

17
 TRANSFORMATION EXAMPLE
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
ctx.save();
ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) +
ctx.translate(10 + j * 50, 10 + i * 50);
ctx.fillRect(0, 0, 25, 25);
ctx.restore();
}
}

18
ANIMATIONS

19
 ANIMATIONS
Principle: redrawing the
canvas quickly
1. Draw changes
2. Complete drawing
clear the canvas
drawing
Model
state space (data)
view (drawing)

20
ANIMATION LOOP

21
 ANIMATION LOOP
const state = /*...*/;

function next() {
update(); // Update current state
render(); // Rerender the frame
requestAnimationFrame(next);
}

next(); // Start the loop

function update() { /* Change app state */ }

function render() { /* Draw app state */ }

22
 TIME-BASED ANIMATION
State change is a function of elapsed time (e.g. physics)
let lastFrameTime = performance.now();
const state = /*...*/;

function next(currentTime = performance.now()) {

const dt = (currentTime - lastFrameTime) / 1000; // seconds
lastFrameTime = currentTime;

update(dt); // Update current state

render(); // Rerender the frame
v = s / t
requestAnimationFrame(next); ds = v * dt
}
a = v / t
next(); // Start the loop
dv = a * dt

23
 EXAMPLE
const box = {
x: 50, y: 50,
vx: random(50, 200), vy: random(50, 200),
width: 30, height: 30,
}
function update(dt) {
box.x += box.vx * dt
box.y += box.vy * dt
if (box.x + box.width > canvas.width) {
box.x = 2 * (canvas.width - box.width) - box.x
box.vx *= -1
}
if (box.x < 0) {
box.x *= -1
box.vx *= -1
}
if (box y + box height > canvas height) {

24
 ENCAPSULATION
class Entity {
constructor(canvas, context) {
this.canvas = canvas
this.context = context
/* Initialize */
}
update(dt) {
/* Update properties */
}
draw() {
/* Render to canvas */
}
}

25
 EXAMPLE
class Ball {
vx = 500;
radius = 20;

constructor(x = this.radius) {
this.x = x;
}

update(dt) {
this.x += this.vx * dt / 1000;
}

draw(context) {
context.beginPath();
context.arc(this.x, this.radius, this.radius, 0, Math.PI *
context.fill();
}

26
SPRITESHEET ANIMATION

27
 SPRITESHEET ANIMATION
const sprite = {
currentFrame: 0,
image: new Image(),
frameCount: 16,
frameTime: 0.03,
elapsedTime: 0,
}
function update(dt) {
sprite.elapsedTime += dt
if (sprite.elapsedTime > sprite.frameTime) {
sprite.currentFrame = (sprite.currentFrame + 1) % sprite.fr
sprite.elapsedTime -= sprite.frameTime
}
}
function draw() {
// clear
ctx clearRect(0, 0, canvas width, canvas height)

28
 SPRITE CLASS
class Sprite {
currentFrame = 0;
timeSinceLastFrame = 0;
loopCount = 0;

constructor({
image,
width,
height,
spritesPerRow = 1,
spritesCount = 1,
frameDuration = 0.03,
numberOfLoops = Number.POSITIVE_INFINITY,
isAnimating = true,
}) {
this.image = new Image();
this image src = image;

29
 ANIMATION WITH SPRITE CLASS
const sprite = new Sprite({
image: "spritesheet.png",
width: 128,
height: 128,
spritesPerRow: 4,
spritesCount: 16,
frameDuration: 0.03
});

let lastFrameTime = performance.now();

function next() {
const currentTime = performance.now();
const dt = currentTime - lastFrameTime;
lastFrameTime = currentTime;

context clearRect(0, 0, canvas width, canvas height);

30
 EXTENDING SPRITE
class Runner extends Sprite {
direction = 1;
x = 0;
vx = 200;

update(dt) {
super.update(dt);
this.x += this.vx * dt / 1000;
}

render(context) {
context.save();
context.translate(this.x, 0);
context.scale(this.direction, 1);
super.render(context, -this.width, 0);
context.restore();
}

31
 SPRITESHEET MOVEMENT
const runner = new Runner({/*...*/});
let lastFrameTime = performance.now();
function next() {/*...*/}

function update(dt) {
runner.update(dt);

if (runner.x >= canvas.width || runner.x <= 0) {

runner.turnAround();
}
}

function render() {
runner.render(context);
}

32
WITH A LITTLE GRAPHICS…

33
 GAMES = INTERACTIVE ANIMATION
Global event handlers modify animation parameters

Game example (Visnovitz Márton 😊 )

34
 INTERACTION
isPointInPath()
isPointInStroke()
⚠ Hit regions
addHitRegion()
removeHitRegion()
clearHitRegions()

35
 CANVAS 3D
Canvas with WebGL technology
const canvas = document.querySelector("canvas");
const webGl = canvas.getContext("webgl");
webGl.viewport(0, 0, canvas.width, canvas.height);

36
 DEMO
tdl.js - aquarium
fps: 1
canvas width: 1024
canvas height: 1024
Number of Fish
1
100
500
1000
5000
10000
15000
20000
25000
30000
Change View
Advanced
Options...

Examples
37
 INLINE SVG
<html>
<svg width="300px" height="300px">
<defs>
<linearGradient id="myGradient" x1="0%" y1="100%" x2="100
<stop offset="5%" stop-color="red"></stop>
<stop offset="95%" stop-color="blue" stop-opacity="0.5"
</linearGradient>
</defs>
<circle id="myCircle" class="important" cx="50%" cy="50%" r
fill="url(#myGradient)" onmousedown="alert('hello');"/>
</svg>
</html>

38
BROWSER APIS

39
 BROWSER APIS
APIs for accessing/handling resources
BOM (Browser Object Model)
Location API
Geolocation API
MediaDevices API
File API
…

40
THE BROWSER WINDOW

41
 BOM ( window )
Window (tab) containing the DOM, context of JS
Global namespace
Window-related functions
Place for many other APIs
Browser Object Model (BOM)
Reference
42
 GLOBAL NAMESPACE
function hello() {
console.log('Hello');
}
window.hello()

// Unintentional global variable

function sideEffect() {
let aVeryBigVariable
aVeryBigvariable = 12; // window.aVeryBigvariable
}
sideEffect()
console.log(aVeryBigvariable);
console.log(window.aVeryBigvariable);

// strict mode
function sideEffectStrict() {
"use strict"

43
 NEW WINDOW
window.open() , window.close()
opener
The new window reference is a window object
const options = "resizable,width=800,height=600,scrollbars=yes"
const elte = window.open("http://www.elte.hu", "ELTE", options)
elte.resizeTo(400, 200);
elte.document.querySelector("p");
elte.opener; // window
elte.close();

Open new window

44
 LOCATION API
Reading the contents of the title bar
Each part can be handled separately
hash , host , hostname , href , origin , pathname , port ,
protocol , search , username , password
// http://example.com:8080/page.html?name=value#anchor
location.href; // the entire URL
location.host; // "example.com:8080"
location.hostname; // "example.com"
location.origin; // "http://example.com:8080"
location.pathname; // "/page.html"
location.port; // "8080"
location.protocol; // "http:"
location.search; // "?name=value"
location.hash; // "#anchor"

45
 LOCATION API
Changing the URL
assign(newUrl) : load new page
replace(newUrl) : overwrite the current one
reload()
Események
hashchange : change in the URL fragment

window.location = "http://www.elte.hu";
window.location.href = "http://www.elte.hu";
window.location.assign("http://www.elte.hu");
window.location.replace("http://www.elte.hu");
window.location.reload();

46
 URLSearchParams
For processing the location.search parameter
const searchParams = new URLSearchParams(location.search);

searchParams.has("paramName");
searchParams.get("paramName");
searchParams.getAll("paramName");
searchParams.set("paramName");
searchParams.append("paramName", "paramValue");
searchParams.delete("paramName");

a= 5
b= 8
Küld
Küldve: a = b =

Reference
47
 HISTORY
Traversing the browser history
window.history
back()
forward()
go(n)
window.history.back();
window.history.forward();
window.history.go(-3);

48
 HISTORY
Modifications
window.history.pushState(stateObj, name, url)
window.history.replaceState(stateObj, name, url)
window.onpopstate event
window.onpopstate = function(e) {
console.log("location: " + document.location + ", state: " +
};

history.pushState({page: 1}, "title 1", "?page=1");

history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // logs "location: http://example.com/example.h
history.back(); // logs "location: http://example.com/example.h
history.go(2); // logs "location: http://example.com/example.h

DEMO
49
 IFRAME PROGRAMMING
Supported, valid
Window inside the window
Separated environment
sandboxing
asynchronous communication
Accessing
window.parent
iframe.contentWindow
iframe.contentWindow.document /
iframe.contentDocument
Same Origin Policy
50
 POSTMESSAGE
Managed communication between windows
postMessage() , message event
<iframe src="http://localhost:8081/window.postmessage.iframe.ht

// parent window
window.addEventListener('load', function () {
const iframe = document.querySelector('iframe')
iframe.contentWindow.postMessage("message", "http://localho
})
window.addEventListener('message', function (e) {
console.log(e.origin, e.data)
})

// iframe
window.addEventListener('message', function (e) {
if (e.origin === "http://localhost:8080") {
console.log(e.data)
window.parent.postMessage('message back', 'http://local
}
})
Need two http-servers: 8080, 8081

51
 FURTHER WINDOW PROPERTIES
Properties
name Methods
fullscreen alert , confirm , prompt
Events atob , btoa (base64
load , unload encoding)
abort , close matchMedia
contextmenu print
resize , scroll , postMessage
select stop
storage fetch
copy , cut , paste
52
 WEB WORKERS
True multithreading
Communication: messages/events
// main thread
const worker = new Worker('other.js');
worker.onmessage = function(e) {
console.log(e.data);
};
worker.postMessage('something');

//other.js
self.onmessage = function(e) {
self.postMessage("Kapott adat: " + e.data);
};

53
 DRAG AND DROP
Draggable object: draggable="true"
dragstart , dragenter , dragover , drop , etc events
event.dataTransfer
setData
setDragImage
effectAllowed
dropEffect
http://html5demos.com/drag

54
 DRAG AND DROP
Example
1. draggable attributes
2. dragstart event: storing drag data
3. dragover event: selecting dropzone
4. dragleave event: leaving dropzone
5. drop event: drop
6. dragend event: drag data reset

55
FURTHER HTML5 JAVASCRIPT APIS
Media
Fullscreen
Offline applications
Application Cache
window online/offline events
navigator.online
Contenteditable
Web sockets, Server Sent Events
Geolocation
File API (desktop), Filesystem

56
MEDIA ELEMENTS

57
 AUDIO
Playing audio files
HTMLAudioElement
<audio src="horn.wav" id="audio1" controls></audio>

// existing element
document.querySelector('audio').play();

// in-memory element
const audio = document.createElement('audio');
audio.src = 'horn.wav';
audio.play();

0:00 / 0:00 Play Stop

58
 VIDEO
HTML <video> tag
HTMLVideoElement

0:00

Play Stop

59
 VIDEO
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const video = document.querySelector('video')
const mainloop = function() {
window.requestAnimationFrame(mainloop);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
}
mainloop()

0:00

60
 VIDEO
let deg = 0;
const mainloop = function() {
window.requestAnimationFrame(mainloop);

deg += 0.01
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.save()
ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.scale(0.5, 0.5)
ctx.rotate(deg)
ctx.drawImage(video, -canvas.width / 2, -canvas.height / 2, c
ctx.restore()
}
0:00

61
 VIDEO

0:00

red green blue

62
 VIDEO
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const image = document.querySelector('img')
const video = document.querySelector('video')
const red = document.querySelector('#red')
const green = document.querySelector('#green')
const blue = document.querySelector('#blue')

navigator.mediaDevices.getUserMedia({video: true})
.then(function(mediaStream) {
image.src = mediaStream
video.srcObject = mediaStream
video.addEventListener('loadeddata', function () {
video.play()
mainloop()
})
})

63
64
 SUMMARY
Canvas
Animations
window (BOM)
JavaScript APIs
Programming media elements

65