Html5 Canvas and drawing a rectangle

Source: Internet
Author: User
Tags transparent color

Canvas tags are used to create a rectangular canvas area, using the JS method provided by Canvas to draw graphics, you can control each pixel of the canvas, similar but not limited to PHP's GD library.

Below I will be divided into a number of articles to introduce the use of Canvas tags, although the actual use of Canvas label is very small, but after the popularization of HTML5 must be a major trend, we first strike for strong.


Canvas is a "<canvas></canvas>" tab in an HTML page and is displayed as a rectangular area. The upper-left corner of the rectangular area is the coordinate origin (0,0), the x-axis to the right, and the y axis down.

Detect browser support

The code is as follows Copy Code

try {
Document.createelement ("Canvas"). GetContext ("2d");
document.getElementById ("Support"). InnerHTML =
"HTML5 Canvas is supported in your browser."
catch (e) {
document.getElementById ("Support"). InnerHTML = "HTML5 Canvas is not supportedé
In your browser. ";

4. Failure fallback
For browsers that do not support canvas, alternative text is displayed in the middle of the canvas label. Note: There are still two points that are not available, and the pictures drawn in canvas cannot be formatted with alternative text (text alternatives).

5, browser support
Microsoft has pledged to support canvas in IE9, except for other IE browsers.

How to use

Canvas can draw lines, arcs, support a variety of line styles and the use of solid color or picture fill, you can draw text and shadow, and so on, API and the general language of the 2D drawing API similar, do not repeat excerpt, you can see Mozilla Developer Center

Create Canvas

Before drawing, we need to create a canvas that is similar to PS creating a new layer.

  code is as follows copy code
<!doctype html>
  <meta charset= "UTF-8"
 <title>html5-canvas demo | bin fruit blog </title>
 <script type= " Text/javascript ""
  window.onload = function () {
   //js section, followed by the JS code here to add ...
   #bingcanvas {border:2px solid #E5E5E5; background: #FAFAFA;}
 <canvas id= "MyCanvas" width= "800px" height= "400px;" > Sorry, your browser does not support this feature, please download the latest version of Chrome</canvas>

The above is the basic structure of our example. The body tag creates a canvas with the canvas tag, the ID is MyCanvas, and the width is 800px and 400px respectively; to make it clearer, I also used CSS to give the canvas a border and a light gray background color.

Run the code above to get the following page:

Light Gray is the area of the canvas, and if the drawing is more than this area it will be automatically hidden.
Draw a rectangle

Canvas tag itself does not have the ability to draw, is only used to build the canvas, all the drawing work requires JS to complete, the creation of the canvas of the code has been given to place JS area for reference.

First, we'll create a simplest rectangle.

The code is as follows Copy Code

Mycanvas.fillstyle = ' Blue ';
Mycanvas.fillrect (10, 10, 310, 110);

First declare the color of the rectangle with the FillStyle method, and then declare the position and size of the rectangle with the FillRect method.

FillStyle: Declare a rectangle color, you can use hexadecimal color, keyword color, RGB, RGBA, here to focus on the RGBA, is a CSS3 thing, used to establish a transparent color.

FillRect: Declares the position and size of the rectangle, the first two properties are the x-axis and y-axis of the rectangle, and the last two properties are the length and width of the rectangle:

Thus, we create a pure black rectangle with a transparency of 50%:

The code is as follows Copy Code
Mycanvas.fillstyle = ' Blue ';
Mycanvas.fillrect (320, 100, 310, 110);
Mycanvas.fillstyle = "Rgba (0, 0, 0, 0.5)";
Mycanvas.fillrect (280, 80, 310, 110);

Canvas has two points to note:

 1, you can read and write canvas objects in pixels;
 2, you can load pictures across stations in canvas, but pictures that are loaded across stations cannot be edited in pixels. That is, the pictures that are loaded across the station can be displayed, but cannot be read and copied.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.