IT. Expert System.

HTML

Introduction


Canvas Introduction

The <canvas> element is a new HTML5 markup element that allows drawing in a web page without using Document Object Model (DOM) APIs or plug-ins. Although somewhat new, the <canvas> element has been adopted by most modern browsers.

Instead of creating graphics on-screen using HTML elements and other markup with CSS styling, Canvas allows the drawing of graphics directly using JavaScript commands like drawRect, fill, and drawImage. In addition, it is possible to manipulate pixels directly to modify images and create special effects. Although Canvas is currently a 2D drawing API, 3D support is planned for future releases.

Canvas is gaining popularity because of the following features:

  • Allows drawing of graphics directly without having to resort to <div> or CSS tricks
  • Canvas is a web standard, supported by most browsers, with compatible implementations
  • More easily hardware accelerated resulting in fast animations

Note: Although using the <canvas> element is straightforward, it is helpful to have a basic understanding of HTML and JavaScript.

Browser / Platform Support

At this time Canvas is supported in the latest versions of almost all modern browsers and virtually all smartphone platforms support Canvas.

The following table lists the supported platforms and versions:

Browser Supported in Version(s)
Firefox 2.0
Internet Explorer IE 9.0
Chrome 4.0
Opera Desktop - 9.0
Mobile - 10.0
Safari Desktop - 3.1
Mobile - 3.2

Platform Supported in Version(s)
Android 2.1
BlackBerry BlackBerry OS 6.0+
BlackBerry PlayBook 1.0+
HP webOS webOS 1.4.5
webOS 2.0

Testing for Support

Although most modern browsers support Canvas, some of the older versions do not. Therefore, it is a good practice to test for Canvas support. There are two mechanisms to test for Canvas support:

Canvas Fallback

To be safe, provide alternative content inside the canvas element as shown in the following example:

<canvas id="clock" width="100" height="100">
   The current time is: 03:51 PM
</canvas>

Browsers which support <canvas> will ignore the fallback content and render the canvas normally. Otherwise, browsers which don't support <canvas> will render the fallback content within the element.

Testing in JavaScript

To check for Canvas support in JavaScript, test for the getContext() method. The following code shows how to do this:

var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
// canvas supported code here
} else {
// canvas not supported code here
}

Differences from SVG

While both Canvas and SVG can be used to create graphics, they are very different and each has their own purpose. Canvas is an immediate mode drawing surface whereas SVG is a retained mode scene graph. This means that Canvas is a lower level API than SVG, giving the developer more control and speed at the cost of more code and complexity. SVG is a higher level API, which lets the developer quickly draw shapes, but at the cost of fewer features and reduced speed. In addition, SVG is a resolution-independent vector API, while canvas is a resolution-dependent bitmap API.

Currently, Canvas has better browser support and can be used to draw vectors like SVG.

Getting Started

The Canvas API is very simple to work with - create a canvas element in the HTML page, grab a drawing context, start drawing.

The following example shows the minimum code needed to draw a rectangle:

<html>
<head>
  <style type="text/css">
    canvas { border: 1px solid black; }
  </style>
</head>
<body>

<h3>Canvas Demo</h3>
<canvas id="mycanvas" width="200" height="100"></canvas>

<script language="Javascript">

// Obtain a reference to the canvas element
var canvas = document.getElementById('mycanvas');

// Obtain a context to draw on
var c = canvas.getContext('2d');

// Set the fill color
c.fillStyle = "red";

// Draw a filled rectangle
c.fillRect(10,10,50,50);

</script>

</body>
</html>

This code produces the following result:


The canvas element must have an id (mycanvas in this case) so that a reference to the canvas can be obtained. In addition, the canvas element must specify a width and height.

To get the drawing context, get a reference to the Canvas element (using getElementById) and call getContext('2d').

With the drawing context, drawing is performed with commands like fillRect and draw.

Note: In the future, Canvas will support contexts other than '2d', such as the pending WebGL spec for 3D graphics.



Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 87 / 159131411. Delta: 0.04194 с