Code has been added to clipboard!

HTML canvas Tutorial

Reading time 2 min
Published Mar 19, 2019
Updated Oct 1, 2019

HTML canvas Tutorial: Main Tips

  • The <canvas> element provides a fixed-size drawing space, allowing developers to create HTML graphics. However, graphic creation with the <canvas> is usually done by using JavaScript.
  • The created canvas has a default size of 300px x 150px.
  • This HTML <canvas> tutorial lists the possibilities of using this element: combining multiple photos, drawing graphs, generating animations.

Use and Purpose of canvas

This HTML <canvas> tutorial explains that <canvas> HTML defines an area of the webpage that becomes a space for rendering HTML graphics. Alternative HTML graphics element is <svg>.

Remember: it is necessary to use the closing </canvas> tag.

In the example below, we set the drawing space:

Example
<canvas id="canvas01" width="400" height="300" style="border: 1px solid #eee;"></canvas>

Note: it is possible to manipulate the size of <canvas> by using HTML height and width attributes. They are the attributes this element accepts.

<canvas> in HTML allows developers to create rectangles. Different shapes have to be generated by adding together one or multiple paths. This HTML <canvas> tutorial explains how to draw rectangles with three functions:

  • fillRect(x, y, width, height) - creates a filled rectangle.
  • strokeRect(x, y, width, height) - creates a rectangular outline.
  • clearRect(x, y, width, height) - makes the rectangular transparent.

All three functions accept the same parameters. x and y indicate the position on the canvas of the top-left corner of the rectangle.

In this HTML <canvas> example, we create a filled rectangle:

Example
<script>
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(30, 30, 100, 100);
  }
}
</script>

The following HTML <canvas> example shows how to create a rectangular outline:

Example
<script>
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(30, 30, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);

  }
}
</script>
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Attributes for canvas

width

The width attribute sets width in pixels for a canvas element. Default is 300 pixels.

Example
<canvas id="canvas02" width="400" style="border: 1px solid #eee;"></canvas>

height

The height sets height in pixels for a canvas element. Default is 150 pixels.

Example
<canvas id="canvas03" height="300" style="border: 1px solid #eee;"></canvas>

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1.5+
Browser image
IE
9+
Browser image
Opera
9+
Browser image
Safari
2+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
1+

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 30/11/2020
3176 People Used
Only 97 Left
Rating
5.0