<< Back to the blog

HTML5 - Canvas




By @islamzatary

Canvas Definition & Features

Canvas defined in the HTML5 code which allows us to draw various images, Using JavaScript API, we can draw single geometric 2D figures, load images and other media or even animate movement for those elements.

Features:

Help you provide the rich interactivity.
Its a Bitmap system, which mean its an object used to work with images defined by pixel data.
Totally free and open!.
Accelerated performance & no Plugin.
Now developed as a W3C spec.
In canvas You do not have any DOM nodes for the shapes you draw.

SVG

is an XML-based vector graphics format. SVG content can be static, dynamic, interactive and animated — it is very flexible. You can also style SVG with CSS and add dynamic behaviour to it using the SVG DOM.

Features:

SVG is a vector system (Separate dom object).
SVG isn't part of HTML5.
You can include SVG inside (X)HTML using object.
SVG defines the graphics in XML format.
SVG graphics do NOT lose any quality if they are zoomed or resized.

Canvas vs SVG

Are both Web technologies that allow you to create rich graphics inside the browser.

SVG Example VS Canvas Example

Canvas uses for:

Data Visualisation.

Animated Graphics.

Web Application.

Games.

Advantages & Disadvantages of Canvas and SVG

The advantages of Canvas:

High performance 2D surface for drawing anything you want.

Constant performance — everything is a pixel.

You can save the resulting image as a .png or .jpg.

The advantages of SVG:

Resolution independence.

SVG has very good support for animations.

You have full control over each element using the SVG DOM API in JavaScript.

Disadvantages of Canvas:

There are no DOM nodes for anything you draw. It is all pixels.

There's no API for animation. You have to resort to timers and other events to update the Canvas when needed.

Poor text rendering capabilities.

Disadvantages of SVG:

Slow rendering when document complexity increases.

SVG might not be suited by itself for applications like games.

More Details

Basic canvas element

Example

What does Context mean in programming?

the area within which this object acts.

Coordinate System

Screen Coordinate

Render Context

Everything is drawing onto the 2D rendering context (ctx)

Screen Coordinate

getContext() to access 2D rendering context
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context => is the object to access all canvas context.

Start Coding - API's

context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4;
// Draw some rectangles.
context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);

// Paths
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

// Inserting images
context.drawImage(img_elem, dx, dy);
context.drawImage(img_elem, dx, dy, dw, dh);
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh); // Text
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50); //Shadow
context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = 'rgba(255, 0, 0, 0.5)'; context.fillStyle = '#00f'; context.fillRect(20, 20, 150, 100); // Gradient
var gradient1 = context.createLinearGradient(0, 0, 0, 100); gradient1.addColorStop(0, '#CCC'); gradient1.addColorStop(0.5, '#FFF'); gradient1.addColorStop(1, '#999'); context.fillStyle = gradient1; context.fillRect(20, 20, 100, 75);

Export Canvas to Image

By using toDataURL();
var canvas = document.getElementById("ex1"); var dataUrl = canvas.toDataURL(); window.open(dataUrl, "toDataURL() image", "width=600, height=600");

Webgl

WebGL is a web standard created to display 3D graphics in any platform that supports OpenGL.

WebGL is actually a 2D API, not a 3D API

Webgl Fundamentals

What can we do in canvas

2D

Demo1
Demo2


WebGl(3D)

Demo1
Demo2

HTML5 Canvas




Practical



Wrapping up








<< Back to the blog

by @islamzatary