The HTML
<canvas> element is used to draw graphics on a web page.
Border width in pixels. Normal background color. If true (the default), the canvas cannot be scrolled outside of the scrollregion. Cursor used in the canvas like arrow, circle, dot etc. Size of the canvas in the Y dimension. 6: highlightcolor. Color shown in the focus highlight.
The graphic to the left is created with
<canvas> . It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.
What is HTML Canvas?
The HTML
<canvas> element is used to draw graphics, on the fly, via JavaScript.
Canvas draw rectangle Canvas draw rectangle. Need a Canvas Account? Click Here, It's Free! Browse courses Log In Email. Forgot Password? Log In Sign in with Apple; Login with Facebook.
Canvas Draw 6 0 2 X 2
The
<canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Browser Support
The numbers in the table specify the first browser version that fully supports the
<canvas> element.
Canvas Draw 6 0 2 X 2Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:
<canvas width='200' height='100'></canvas>
Note: Always specify an
id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.
Here is an example of a basic, empty canvas:
Example
<canvas width='200' height='100'> Try it Yourself »
</canvas> Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
Here are some examples:
Draw a LineExample
<script> Try it Yourself »
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script> Draw a CircleExample
<script> Try it Yourself »
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </script> Draw a TextExample
<script> Try it Yourself »
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.font = '30px Arial'; ctx.fillText('Hello World', 10, 50); </script> Stroke TextExample
<script> Try it Yourself »
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.font = '30px Arial'; ctx.strokeText('Hello World', 10, 50); </script> Draw Linear GradientExample
<script>
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'white'); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script> Canvas Draw 6 0 2 X 20 44 XTry it Yourself »Draw Circular GradientExampleCanvas Draw 6 0 2 X 2 Answer
<script> Try it Yourself »
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); // Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'white'); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script> Draw Image
<script> Try it Yourself »
var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); var img = document.getElementById('scream'); ctx.drawImage(img, 10, 10); </script> HTML Canvas Tutorial
To learn more about <canvas> , please read our HTML Canvas Tutorial.
The Canvas is a rectangular area intended for drawing pictures or other complex layouts. You can place graphics, text, widgets or frames on a Canvas.
Syntax
Here is the simple syntax to create this widget −
Parameters
The Canvas widget can support the following standard items −
arc − Creates an arc item, which can be a chord, a pieslice or a simple arc.
image − Creates an image item, which can be an instance of either the BitmapImage or the PhotoImage classes.
line − Creates a line item.
oval − Creates a circle or an ellipse at the given coordinates. It takes two pairs of coordinates; the top left and bottom right corners of the bounding rectangle for the oval.
polygon − Creates a polygon item that must have at least three vertices.
Example
Try the following example yourself −
When the above code is executed, it produces the following result −
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |