How to draw shapes and paths on HTML5 canvas? 1. First set the canvas element and get the 2D context; 2. Use fillRect, strokeRect or clearRect to draw the rectangle; 3. Create a path through beginPath, moveTo, lineTo, arc, etc. to draw complex shapes; 4. Use fill or stroke to fill or stroke to fill or stroke; 5. Use fillStyle, strokeStyle and lineWidth to set styles. For example, to draw a blue square, you need to set fillStyle and call fillRect, and to draw a circle, you need to call the arc method and cooperate with beginPath and stroke. Note that each time you draw a new shape, beginPath should be called to avoid path interference.

Drawing shapes and paths on an HTML5 canvas is straightforward once you understand the basic methods involved. It's all about setting up your canvas, choosing drawing styles, and using path commands effectively.

Setting Up the Canvas

Before you can draw anything, you need a <canvas></canvas> element in your HTML:

 <canvas id="myCanvas" width="500"    style="max-width:90%"></canvas>

Then get its context using JavaScript:

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

This ctx object gives you access to all the 2D drawing functions. If you skip this step or misspell '2d', nothing will show up, so double-check that line.

Drawing Basic Shapes

To draw rectangles, you can use three main methods:

• fillRect(x, y, width, height) – draws a filled rectangle
• strokeRect(x, y, width, height) – draws an outlined rectangle
• clearRect(x, y, width, height) – clears a rectangle area

For example:

 ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

That draws a blue square at (50,50) with a size of 100x100 pixels.

If you want circles or arcs, you'll need paths.

Creating Paths for Complex Shapes

Paths let you draw lines, curves, and custom shapes. The process usually follows this pattern:

• Begin the path with beginPath()
• Move to a starting point with moveTo(x, y)
• Use line or curve commands like lineTo() , arc()
• Optionally close the path with closePath()
• Then fill or stroke it

Here's how to draw a simple triangle:

 ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.fill();

One thing people often forget: if you don't call beginPath() before starting a new shape, the previous path might still be part of the current one, leading to unexpected fills or strokes.

Arcs are useful for pie charts or progress bars. Here's a basic circle:

 ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2);
ctx.stroke();

That draws an outlined circle centered at (200,200) with a radius of 50.

Styling Your Drawings

You can control color, line thickness, and more with these properties:

• ctx.fillStyle – sets the color or style used inside shapes
• ctx.strokeStyle – sets the color or style for outlines
• ctx.lineWidth – controls the thickness of lines

For example:

 ctx.fillStyle = 'green';
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 5;

Also, you can set line caps and joins for more pollished visuals:

 ctx.lineCap = 'round'; // or 'butt', 'square'
ctx.lineJoin = 'bevel'; // or 'miter', 'round'

Basically that's it. Once you've got the hang of paths and styling, you can start combining shapes into more complex graphics and animations.

The above is the detailed content of Drawing shapes and paths on an HTML5 canvas.. For more information, please follow other related articles on the PHP Chinese website!