Contents
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:
<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:
<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:
<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>

- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Attributes for canvas
width
The width
attribute sets width in pixels for a canvas element. Default is 300 pixels.
<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.
<canvas id="canvas03" height="300" style="border: 1px solid #eee;"></canvas>
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera
