HTML Canvas-HTML Tutorial-php.cn

Table of Contents

What is HTML Canvas?

Examples of HTML Canvas Drawing

1. Drawing a Line on a Page

2. Drawing a Circle on HTML Canvas

3. Drawing a Text in HTML Canvas

4. Drawing an arc Inside an HTML Canvas

5. Drawing Linear or Circular Color Gradient

Conclusion

Home

Web Front-end

HTML Tutorial

HTML Canvas

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:39 PM

html html5 HTML Tutorial HTML Properties HTML tags

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.

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

What is HTML Canvas?

HTML canvas (used via

Syntax:

<canvas id="example" width="200" height="200">
<em>Content here</em>
</canvas>

Copy after login

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:

<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>

Copy after login

Output:

HTML Canvas

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:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>

Copy after login

Output:

HTML Canvas

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 * Math.PI, false);

Copy after login

Here is an example of a page with a circle:

Code:

<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>

Copy after login

Output:

HTML Canvas

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:

<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
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);
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>

Copy after login

Output:

HTML Canvas

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);

Copy after login

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

Code:

<html lang="en">
<head>
<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>

Copy after login

Output:

HTML Canvas

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.

Syntax:

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

Copy after login

Here is a page that has a linear gradient:

Code:

<html>
<body>
<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
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);
</script>
</body>
</html>

Copy after login

Output:

HTML Canvas

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

Syntax:

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

Copy after login

Code:

<html>
<body>
<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
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);
</script>
</body>
</html>

Copy after login

Output:

HTML Canvas

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.

The above is the detailed content of HTML Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn