Patrick Lid Monslaup
Technical manager & developer for Knowit Experience Bergen. Looking for a new job? Check out http://knowit.no/karriere
Canvas
practical html5
Patrick Monslaup
Knowit Experience Bergen
patrick.monslaup@knowit.no
No javascript framework was made for this talk
What is canvas?
Easy way to draw in javascript
Basics
Quick, draw a line
<canvas id="demo"
width="150"
height="300">
<!--
Content placed inside
is used as fallback
in old browsers,
such as IE8
-->
Canvas isn't
supported
</canvas>// Get the canvas
var c = document
.getElementById("demo");
var ctx =
c.getContext("2d");
// Write line from
// (0,0) to (150,300)
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(150, 300);
ctx.stroke();When can you use canvas?
Animations
.. aren't really that useful
- Simple animations are quicker in pure css
- Advanced animations are often best left to proffesional designers or animators
Interactivity
https://konvajs.github.io/docs/sandbox/
Things
Take
Time
When is it realistic to use canvas?
Canvas has great support
Fallbacks are easy to make
<canvas id="demoCanvas">
Fallback here
</canvas>Image Processing
What is not possible to do in web at the moment, but can be done with canvas?
https://codepen.io/patmon/pen/EoJNaN
Blend mode: multiply
Issue: css blend has terrible support in browsers
A blend for everything
Multiple Blend example
Actual use case
Blend modes
IE, safari, edge, android, ..
Hvordan to bilder skal "mikses"
Another one
Chrome, firefox, opera, samsung
Støtte i CSS
IE, opera mini
Nesten alt
Med Canvas
How?
<canvas
id="@canvasId"
data-src="@imgUrl">
</canvas>
var canvas = document.getElementById("@canvasId");
var ctx = canvas.getContext('2d');
How?
// Create canvas img
var background = new Image();
background.src = canvas.getAttribute("data-src");// Create canvas gradient
var grd = ctx.createLinearGradient(startX,startY,start,y1);
grd.addColorStop(0.000, 'rgba(0,0,0,0)');
grd.addColorStop(1.000, 'rgba(0,0,0,1)');
// Select a blend mode
ctx.globalCompositeOperation = 'multiply';// Fill the canvas with gradient and image
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);Issue: image stretch
// Create canvas img
// Write the image into the canvas,
// but take care so the image isn't stretched
var sx, sy, sWidth, sHeight;
var heightReduction = 1.0 * (image.height / canvas.height);
var widthReduction = 1.0 * (image.width / canvas.width);
if (heightReduction > widthReduction) {
// If the height is reduced more then the width, crop height to keep aspect ratio
sx = 0;
sWidth = background.width;
// Ratio between height and width will be a number between 0 and 1,
// so times 100 will be the % of the original image to show.
var fractionOfImageHeightToshow = widthReduction / heightReduction;
var imageHeightToShow = background.height * fractionOfImageHeightToshow;
var imageHeightToCrop = background.height - imageHeightToShow;
sy = imageHeightToCrop / 2.0;
sHeight = background.height - imageHeightToCrop;
}
else { /* CROP WIDTH HERE */
}
ctx.drawImage(background, sx, sy, sWidth, sHeight, 0, 0, canvas.width, canvas.height);
Images often need to be cropped
Thats it!
https://slides.com/patricklidmonslaup/canvas
Practical Canvas
By Patrick Lid Monslaup
Practical Canvas
Why you should start using Canvas in your projects today
