Trending September 2023 # A Comprehensive Overview Of Html Canvas # Suggested October 2023 # Top 10 Popular

You are reading the article A Comprehensive Overview Of Html Canvas updated in September 2023 on the website Lanphuongmhbrtower.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 A Comprehensive Overview Of Html Canvas

Introduction to HTML Canvas

This article will see an outline on HTML Canvas; as you already know, HTML is a markup language. To present information to the visitor, you can write HTML with what text to show on display and how it will be shown, i.e. font size, color, orientation, etc. When it comes to adding visuals to a page, you are required to link and embed images to the page, which are stored separately from the HTML file on your host.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

But what if you need to draw something on the page?

What is HTML Canvas?

Content here

You can define canvas size via the width and height attribute; an element ID can also be defined in the tag, which makes it possible to use CSS Styles on the canvas element. Following is an example of how you can draw a rectangle using the Canvas element:

Code:

#examplecanvas{border:2px solid green;}

Output:

Examples of HTML Canvas Drawing

Now that you have seen how you can draw a rectangle using the canvas element let’s take a look at some other objects that can be drawn using the element on a browser output screen.

1. Drawing a Line on a Page

moveTo(), stroke() and lineTo() are methods that can be used to draw straight lines on a webpage. As you can guess, moveTo() tells the position of the curser into the element space, and lineTo() is the method that tells the endpoint of the line. The stroke() makes the line visible. Here is the code for your reference:

Code:

canvas { border: 2px solid black; } window.onload = function() { var canvas = document.getElementById(“examplecanvas”); var context = canvas.getContext(“2d”); context.moveTo(10, 150); context.lineTo(350, 100); context.stroke(); };

Output:

2. Drawing a Circle on HTML Canvas

Unlike rectangles, there is no particular method in JavaScript to draw a circle. Instead, we can use the arc() method, which is used to draw arcs to draw a circle in the canvas. To get a canvas with a circle on it, you can use the following:

Syntax :

context.arc(centerX, centerY, radius, 0, 2 * chúng tôi false);

Here is an example of a page with a circle:

Code:

canvas { border: 3px solid red; } window.onload = function() { var canvas = document.getElementById(“examplecanvas”); var context = canvas.getContext(“2d”); context.arc(250, 150, 90, 0, 2 * chúng tôi false); context.stroke(); };

Output:

3. Drawing a Text in HTML Canvas

Text can also be drawn in an HTML Canvas. To get text onto your canvas, you can use the filltext() method. Following is an example of an HTML page that contains text inside a canvas element:

Code:

canvas { border: 3px solid red; } window.onload = function() { var canvas = document.getElementById(“examplecanvas”); var context = canvas.getContext(“2d”); context.font = “bold 28px Arial”; context.fillText(“This is text inside a canvas”, 60, 100); };

Output:

4. Drawing an arc Inside an HTML Canvas

As we discussed with a circle, there is a method called arc() which is used to draw arcs inside HTML Canvas. Here is the syntax of the method where all you have to do is add your variable:

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

Following is an HTML page that has an arc inside a canvas element:

Code:

canvas { border: 3px solid red; } window.onload = function() { var canvas = document.getElementById(“examplecanvas”); var context = canvas.getContext(“2d”); context.arc(300, 300, 200, 1.2 * chúng tôi 1.8 * chúng tôi false); context.stroke(); };

Output:

5. Drawing Linear or Circular Color Gradient

You can use this method to createLienearGradient() to draw gradients of your choice inside the canvas element. With this method, you will have to use addColorStop() to denote gradient colors.

var gradient = context.createLinearGradient(startX, startY, endX, endY);

Here is a page that has a linear gradient:

Code:

var c = document.getElementById(“examplecanvas”); var ctx = c.getContext(“2d”); var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0,”green”); gradient.addColorStop(1,”red”); ctx.fillStyle = gradient; ctx.fillRect(10,10,300,150);

Output:

Similarly, the method of drawing circular gradients is createRadialGradient().

Syntax:

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

Code:

var c = document.getElementById(“examplecanvas”); var ctx = c.getContext(“2d”); var gradient = ctx.createRadialGradient(80,50,10,100,50,90); gradient.addColorStop(0,”blue”); gradient.addColorStop(1,”yellow”); ctx.fillStyle = gradient; ctx.fillRect(10,10,150,80);

Output:

Conclusion

Now that you are familiar with what it is and how it can be used in web pages, you should feel more confident in your web design skills. While images can be used in some cases, the benefit of HTML canvas is that it is scalable and way lighter in terms of size and processing power.