Drawing Basic Shapes

Previous Next

Drawing Simple Shapes Such As Rectangles, Circles, Lines, And Arcs On The Canvas

Drawing Rectangles:

Rectangles are one of the basic shapes you can draw on a Canvas. You can draw filled rectangles or outline rectangles.

Example - Drawing a Filled Rectangle:

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Drawing a filled rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75); // x, y, width, height
</script>

Try it now

In this example:

We obtain the Canvas context (ctx) in JavaScript.
Set the fill color (fillStyle) to blue.
Use the fillRect method to draw a filled rectangle at coordinates (50, 50) with a width of 100 and height of 75.

Example - Drawing an Outlined Rectangle:

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Drawing an outlined rectangle
ctx.strokeStyle = 'red'; // Set outline color
ctx.strokeRect(50, 50, 100, 75); // x, y, width, height
</script>

Try it now

Here, we use strokeStyle to set the outline color and strokeRect to draw an outlined rectangle.

Drawing Circles:

Circles are drawn using the arc method, which creates an arc or a portion of a circle.

Example - Drawing a Circle:

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fill();
</script>

Try it now

Here, arc(200, 100, 50, 0, Math.PI * 2) creates a circle centered at (200, 100) with a radius of 50. The start angle is 0 radians, and the end angle (Math.PI * 2) completes the circle.

Drawing Lines:

Lines are drawn using the moveTo and lineTo methods.

Example - Drawing a Line:

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'purple';
ctx.beginPath();
ctx.moveTo(50, 50); // Start point
ctx.lineTo(200, 100); // End point
ctx.stroke();
</script>

Try it now

This code draws a line from (50, 50) to (200, 100) with a purple color stroke.

Drawing Arcs:

Arcs are used to draw curved lines or portions of circles.

Example - Drawing an Arc:

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'orange';
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI / 2); // x, y, radius, startAngle, endAngle
ctx.stroke();
</script>

Try it now

Here, arc(200, 100, 50, 0, Math.PI / 2) draws a quarter of a circle with a radius of 50 at (200, 100) starting from 0 radians to π/2 radians.

Practice Excercise Practice now

Understanding The MoveTo, LineTo, ArcTo, And BezierCurveTo Methods For Defining Paths

1. moveTo(x, y)

The moveTo method moves the current drawing position to the specified point without drawing anything. It's like lifting your pen from the paper and placing it at a new location.

Parameters:

x: The x-coordinate of the new position.
y: The y-coordinate of the new position.

Example:

context.moveTo(100, 100); // Move pen to (100, 100)

2. lineTo(x, y)

The lineTo method draws a straight line from the current drawing position to the specified point. It's like drawing a line from where the pen is to a new location.

Parameters:

x: The x-coordinate of the end point of the line.
y: The y-coordinate of the end point of the line.

Example:

context.lineTo(200, 200); // Draw a line to (200, 200)

3. arcTo(x1, y1, x2, y2, radius)

The arcTo method draws an arc that connects the current point to the specified point, using the given radius. It's useful for creating curved paths between two points.

Parameters:

x1: The x-coordinate of the first control point.
y1: The y-coordinate of the first control point.
x2: The x-coordinate of the end point of the arc.
y2: The y-coordinate of the end point of the arc.
radius: The radius of the arc.

Example:

context.arcTo(300, 200, 400, 100, 50); // Draw an arc to (400, 100) with a radius of 50

4. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

The bezierCurveTo method draws a cubic Bézier curve from the current point to the specified end point. It requires two control points to define the shape of the curve.

Parameters:

cp1x: The x-coordinate of the first control point.
cp1y: The y-coordinate of the first control point.
cp2x: The x-coordinate of the second control point.
cp2y: The y-coordinate of the second control point.
x: The x-coordinate of the end point of the curve.
y: The y-coordinate of the end point of the curve.

Example:

context.bezierCurveTo(450, 150, 500, 250, 600, 200); // Draw a bezier curve to (600, 200) with control points (450, 150) and (500, 250)

Putting It All Together: Example

Let's create a simple HTML5 canvas drawing using these methods to create a path:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Path Drawing Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Start drawing path
ctx.beginPath();

// Move pen to starting point
ctx.moveTo(100, 100);

// Draw a line to a point
ctx.lineTo(200, 200);

// Draw an arc to a point
ctx.arcTo(300, 200, 400, 100, 50);

// Draw a bezier curve to a point
ctx.bezierCurveTo(450, 150, 500, 250, 600, 200);

// Stroke the path
ctx.stroke();
</script>
</body>
</html>

Try it now

This code creates a canvas and draws a path consisting of a line, an arc, and a Bézier curve. You can run this code in a browser to see the resulting drawing.

Understanding these path creation methods is essential for creating complex and visually appealing graphics in web development and computer graphics applications. With practice and experimentation, you can leverage these methods to create intricate shapes and designs.

Practice Excercise Practice now

Applying Line Styles, Line Joins, And Line Caps To Paths

Line Styles:

Line styles refer to the appearance of the stroke applied to a path. In HTML5 Canvas, you can set line styles using the strokeStyle property. This property can accept color values, gradients, or patterns.

Solid Color Line:

context.strokeStyle = 'red'; // Sets the stroke color to red

Gradient Line:

const gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'green');
context.strokeStyle = gradient; // Sets the stroke to a linear gradient from blue to green
Pattern Line:
javascript
Copy code
const img = new Image();
img.src = 'pattern.png';
img.onload = () => {
const pattern = context.createPattern(img, 'repeat');
context.strokeStyle = pattern; // Sets the stroke to a pattern created from an image
}

Line Joins:

Line joins define how two connected lines or segments are joined at their intersection points. In HTML5 Canvas, you can set line joins using the lineJoin property.

Miter Join:

context.lineJoin = 'miter';

Round Join:

context.lineJoin = 'round';

Bevel Join:

context.lineJoin = 'bevel';

Line Caps:

Line caps define the style of endpoints (caps) of a line when it doesn't form a closed shape. In HTML5 Canvas, you can set line caps using the lineCap property.

Butt Cap:

context.lineCap = 'butt';

Round Cap:

context.lineCap = 'round';

Square Cap:

context.lineCap = 'square';

Examples:

Let's combine these concepts into an example:

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

// Line styles
context.strokeStyle = 'red';
context.lineWidth = 5;

// Line joins
context.lineJoin = 'round';

// Line caps
context.lineCap = 'round';

// Draw a path with line styles, joins, and caps
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 100);
context.lineTo(250, 50);
context.stroke();

In this example:

Line style is set to red with a line width of 5 pixels.
Line join is set to round, so corners will have a rounded appearance.
Line cap is set to round, so endpoints will have a rounded cap.

Practice Excercise Practice now

Previous Next

Drawing Basic Shapes

Drawing Simple Shapes Such As Rectangles, Circles, Lines, And Arcs On The Canvas

Drawing Rectangles:

Understanding The MoveTo, LineTo, ArcTo, And BezierCurveTo Methods For Defining Paths

1. moveTo(x, y)

Applying Line Styles, Line Joins, And Line Caps To Paths

Line Styles:

COMPANY

Products

OTHERS

Partner