Canvas is an HTML5 element used to draw two dimensional images. It represents an area in which you can build graphs, animations, drawings or games using js methods. At first glance, it is analogous to img, but unlike this element, it does not have alt and src attributes. Some browsers have problems with CSS support, so for correct display of animation, diagrams or charts it is important to use html tag canvas.
With canvas you can draw different kinds of curves, lines, rectangles and arches. It is possible to combine them, so you can create almost any shape. It is possible to add effects like blends, gradients, fills, shadows and shapes. The essence of the use of the tag canvas is that it is possible to do drawings using JavaScript.
<!-- HTML -->
<canvas id="newcan" width="250" height="250"></canvas>
// JavaScript
var canvas = document.getElementById("newcan");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#50C878"
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
ctx.fill();
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
It is also possible to insert and personalize text:
<!-- HTML -->
<canvas id="textcan" width="280" height="280" style="border: 3px solid #F34723;"></canvas>
// JavaScript
var canvas = document.getElementById("textcan");
var ctx = canvas.getContext("2d");
ctx.font = "39px Legendaria"
ctx.fillText("Sample text", 45, 145);
This tag has three main attributes: height, width and id. The id attribute gives the item a unique name (example) which makes it easier to identify the item and allows access to the scripting language. The height attribute specifies the number of characters that the element will occupy vertically on the web page. Similarly, width specifies the number of pixels horizontally.
As a result, the browser gets the information, according to which it allocates space on the web page of the required size. The standard canvas is assumed to be 150×300 pixels if you don’t specify height and width. The content of the area created by the canvas element is controlled by contexts.
By default, the canvas element is transparent and frameless and is essentially just an empty space in the browser window where you can create drawings and manipulate images (animate, etc.). However, if necessary, canvas can be styled like any other graphic image. This, as a rule, does not affect the quality of the artwork in the item.
Keep in mind that canvas, unlike img, should be wrapped (closed) with the /canvas tag. Otherwise, the rest of the content in the document will be rendered as spare and will not be displayed.
Using CSS
Is there an alternative to using height and width to represent the size of canvas? In some cases, it is possible to specify height and width using CSS. But, the result might not be what you expected.
The default canvas element is 150×300 pixels. If you don’t enter height and width, this will be the size of the picture. However, when CSS is used to set the image geometry to 200×500, it will scale the canvas content to 150×300 pixels according to the parameters you set.
This amounts to scaling an image by introducing a new width and height that is substantially different from its actual size. In this case there is pixelation and non-symmetric shapes (loss of sharpness, scale and quality of the image).
<!-- HTML -->
<canvas id="csscan" style="border: 7px solid #FF7F50;"></canvas>
/* CSS */
#csscan {
width: 500px;
height: 200px;
}
// JavaScript
var canvas = document.getElementById("csscan");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#0047AB"
ctx.arc(150, 75, 50, 0, getRadians(360));
ctx.stroke();
ctx.fill();
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Similarly, a canvas element that’s 150 pixels high and widened to 300 pixels will have the same amount of pixels but will be stretched by half.
If you use the height and width attributes, you can set the canvas to a size bigger or smaller than the standard size without affecting the quality of the image. Thus, the use of CSS to specify the size is acceptable only if it is justified and the element must be greatly scaled.
Older browsers
Some browsers do not support canvas. Therefore, to inform users whose web browsers do not work with these elements, alternative content is placed between the opening and closing tags. It will only appear if the browser does not support canvas. Otherwise, the alt text will be ignored.
This is easy and fairly straightforward to implement. You need to provide special alternative information inside the HTML canvas tag. If the browser does not work with that element, it will ignore the container and let the user have the alternate content. If the browser supports canvas, it will hide the “backup” caption or image and show only the original canvas.
<!-- HTML -->
<!-- Text information -->
<canvas id="nosupcan" width="210" height="210" style="border: 9px solid #FF00FF;">Your browser has no support for canvas tags</canvas>
<!-- Substitute image -->
<canvas id="notsupcan" width="210" height="210"><img scr="tag_can" alt="image"></canvas>
// JavaScript
var canvas = document.getElementById("nosupcan");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#7B68EE"
ctx.fillRect(55,55,100,100)
It is possible to insert a detailed text description of the canvas element in your alternative content or to display a static image instead of the dynamic image provided. It’s important that the content should look in line with your content.