Canvas of HTML5

HTML Canvas is an element in HTML5 that can be used to draw graphics with the help of JavaScript. It's an amazing drawing technology built into all modern web browsers. With Canvas you can draw graphs, make photo compositions, build games, create animations, or even do real-time video processing or rendering; all with proper web standards. You can even create mobile apps with it.

It's important to understand that Canvas is for drawing pixels. It doesn't have shapes or vectors. There are no objects to attach event handlers to. It just draws pixels to the screen. The canvas element is the actual DOM node that's embedded in the HTML page. A canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2d or WebGL to draw hardware-accelerated 3D graphics on web pages. And each canvas element can only have one context. If we use the getContext() method multiple times, it will return a reference to the same context object.

HTML5’s canvas features

Popularity

Canvas popularity is rapidly and steadily growing so there is no shortage of resources available.

Interactivity

Canvas is fully interactive. It can respond to a user’s actions by listening for keyboard, mouse, or touch events. So a developer is not restricted to only static graphics and images.

Develop once, run everywhere

HTML5 Canvas offers great portability. Once created, Unlike Flash and Silverlight, a canvas application can run almost anywhere - from the largest computers to the smallest mobile devices.

Animation

Every object drawn on the canvas can be animated. This allows for all levels of animations to be created, from simple bouncing balls to complex forward and inverse kinematics.

Flexibility

Developers can create just about anything using canvas. It can display lines, shapes, text, images, etc. - with or without animation. Plus, adding video and/or audio to a canvas application is also possible.

Platform Support

HTML5 Canvas can be accessed on a wide range of devices including desktops, tablets, and smartphones.

A web standard

Unlike Flash and Silverlight, Canvas is open technology that’s part of HTML5. And although not all of its features are implemented in all browsers, developers can be certain canvas will be around indefinitely.

Free and accessible development tools

The basic tools for creating HTML5 canvas applications are just a browser and a good code editor. Plus, there are many great and free libraries and tools to help developers with advanced canvas development.

Browser Support

Mozilla applications gained support for canvas starting with Gecko 1.8. The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports canvas from version 9 onwards; for earlier versions of IE, a page can effectively add support for the canvas by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support canvas.

Its utilities

Drawing Lines

Methods to draw lines on the canvas -

beginPath() - This method resets the current path.

moveTo(x, y) - This method creates a new subpath with the given point.

closePath() - This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

fill() - This method fills the subpaths with the current fill style.

stroke() - This method strokes the subpaths with the current stroke style.

lineTo(x, y) - This method adds the given point to the current subpath, connected to the previous one by a straight line.

Drawing Rectangles

There are three methods that draw rectangles on the canvas −

fillRect(x,y,width,height) - This method draws a filled rectangle.

strokeRect(x,y,width,height) - This method draws a rectangular outline.

clearRect(x,y,width,height) - This method clears the specified area and makes it fully transparent.

Drawing Paths

The following methods to draw paths on the canvas −

beginPath() - This method resets the current path.

moveTo(x, y) - This method creates a new subpath with the given point.

closePath() - This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

fill() - This method fills the subpaths with the current fill style.

stroke() - This method strokes the subpaths with the current stroke style.

arc(x, y, radius, startAngle, endAngle, anticlockwise) - Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line.

Using Images

To draw on that image by using following methods −

beginPath() - This method resets the current path.

moveTo(x, y) - This method creates a new subpath with the given point.

closePath() - This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

fill() - This method fills the subpaths with the current fill style.

stroke() - This method strokes the subpaths with the current stroke style.

drawImage(image, dx, dy) - This method draws the given image onto the canvas. Here the image is a reference to an image or canvas object. x and y form the coordinate on the target canvas where our image should be placed.

Text and Fonts

HTML5 canvas provides capabilities to create text using the different font and text properties -

font [ = value ] - This property returns the current font settings and can be set, to change the font.

textAlign [ = value ] - This property returns the current text alignment settings and can be set, to change the alignment. The possible values are the start, end, left, right, and center.

textBaseline [ = value ] - This property returns the current baseline alignment settings and can be set, to change the baseline alignment. The possible values are top, hanging, middle, alphabetic, ideographic and bottom.

fillText(text, x, y [, maxWidth ] ) - This property fills the given text at the given position indicated by the given coordinates x and y.

strokeText(text, x, y [, maxWidth ] ) - This property strokes the given text at the given position indicated by the given coordinates x and y.

Styles and Colors

HTML5 canvas provides the following two important properties to apply colors to a shape −

fillStyle - This attribute represents the color or style to use inside the shapes.

strokeStyle - This attribute represents the color or style to use for the lines around shapes.

Canvas Translation

This method is used to move the canvas and its origin to a different point in the grid. HTML5 canvas provides translate(x, y) method which is used to move the canvas and its origin to a different point in the grid.

Canvas Scaling

This method is used to increase or decrease the units in a canvas grid. HTML5 canvas provides scale(x, y) method which is used to increase or decrease the units in our canvas grid. This can be used to draw scaled down or enlarged shapes and bitmaps.

Canvas Animation

Create basic animation by using HTML5 canvas and JavaScript. HTML5 canvas provides necessary methods to draw an image and erase it completely. We can take Javascript help to simulate good animation over an HTML5 canvas.

setInterval(callback, time) - This method repeatedly executes the supplied code after a given time millisecond.

setTimeout(callback, time) - This method executes the supplied code only once after a given time millisecond.

Canvas Transform

These methods allow modifications directly to the transformation matrix. HTML5 canvas provides methods which allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.

transform(m11, m12, m21, m22, dx, dy) - This method changes the transformation matrix to apply the matrix given by the arguments.

setTransform(m11, m12, m21, m22, dx, dy) - This method changes the transformation matrix to the matrix given by the arguments.

Drawing an Arc

You can create arc path like smiley faces using the arc() method.

Drawing a Circle

There is no specific method for creating a circle like a rectangle's rect() method. However, you can create a fully enclosed arc such as circle using the arc() method.

Shadow Effects

Canvas also supports shadows, similar to CSS. You can set the color, offset and blur radius of the shadow to simulate different effects.

Using the HTML5 audio Element

The newly introduced HTML5

element provides a standard way to embed audio in web pages. However, the audio element is relatively new, but it works in most of the modern web browsers. The following example simply inserts an audio into the HTML5 document, using the browser default set of controls, with one source.

Using the HTML5 Video Element

The newly introduced HTML5

element provides a standard way to embed video in web pages. However, the video element is relatively new, but it works in most of the modern web browsers. The following example simply inserts a video into the HTML5 document, using the browser default set of controls, with one source.

Gaming

The HTML5 Canvas’ feature set is an ideal candidate for producing all sorts of 2D and 3D games.

Advertising

HTML5 Canvas is a great replacement for Flash-based banners and ads. It has all the needed features for attracting buyers’ attention.

Data Representation

HTML5 can collect data from global data sources and use it to generate visually appealing and interactive graphs and charts with the canvas element.

Hope this introductory article of HTML5 Canvas has given you a good starting point from which to continue your learning and exploring of this powerful technology. If you have your own experience, don’t forget to share in the comments section below. Thank you!

#canvas radial Stories - 1 stories

Canvas of HTML5 and its utility