Lesson 32: Creating Graphics Part 2

Master advanced canvas drawing techniques - create curves, text, gradients, and transform objects with interactive examples.

❮ Previous Lesson Next Lesson: Creating Objects ❯

32.1 Advanced Canvas Techniques

Building on the fundamentals from Lesson 31, we'll explore more sophisticated drawing techniques including curves, text rendering, gradients, transformations, and clipping paths.

Key concepts:
  • Creating smooth curves with quadratic and Bézier paths
  • Rendering and styling text on canvas
  • Using linear and radial gradients for color effects
  • Transforming drawings with translate, rotate, and scale
  • Defining clipping paths to restrict drawing areas
  • Applying shadows for depth and dimension

32.2 Drawing Arcs and Circles

The arc() method allows you to create circles, semicircles, and arcs of any angle:

// Draw a full circle
ctx.beginPath();
ctx.arc(200, 150, 80, 0, Math.PI * 2);
ctx.fillStyle = '#FF9800';
ctx.fill();

// Draw a semicircle
ctx.beginPath();
ctx.arc(200, 150, 60, 0, Math.PI);
ctx.strokeStyle = '#2196F3';
ctx.lineWidth = 3;
ctx.stroke();

// Draw a quarter circle
ctx.beginPath();
ctx.arc(200, 150, 40, Math.PI, Math.PI * 1.5);
ctx.fillStyle = '#4CAF50';
ctx.fill();

Example 32.1: Drawing Circles and Arcs

Click the buttons to see different arc examples:

32.3 Drawing Curves

Canvas supports quadratic and Bézier curves for creating smooth, complex shapes:

// Quadratic curve: control point then end point
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.quadraticCurveTo(200, 50, 350, 200);
ctx.strokeStyle = '#E91E63';
ctx.lineWidth = 3;
ctx.stroke();

// Bézier curve: two control points then end point
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(150, 250, 250, 50, 350, 100);
ctx.strokeStyle = '#9C27B0';
ctx.lineWidth = 3;
ctx.stroke();

Example 32.2: Drawing Curves

Explore different curve types and their control points:

32.4 Drawing Text

Canvas provides methods to draw and style text with various fonts, alignments, and effects:

// Basic text
ctx.font = '30px Arial';
ctx.fillStyle = '#2196F3';
ctx.fillText('Hello Canvas', 50, 50);

// Styled text with shadow
ctx.font = 'bold 36px "Segoe UI"';
ctx.fillStyle = '#FF5722';
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText('JavaScript', 50, 120);

// Outlined text
ctx.font = 'italic 40px Georgia';
ctx.strokeStyle = '#4CAF50';
ctx.lineWidth = 2;
ctx.strokeText('Graphics', 50, 190);

Example 32.3: Text Rendering

See different text styling options on canvas:

32.5 Using Gradients

Create linear and radial gradients to add depth and visual interest to your drawings:

// Linear gradient
const linearGradient = ctx.createLinearGradient(0, 0, 400, 0);
linearGradient.addColorStop(0, '#FF5722');
linearGradient.addColorStop(0.5, '#FFC107');
linearGradient.addColorStop(1, '#4CAF50');
ctx.fillStyle = linearGradient;
ctx.fillRect(50, 50, 300, 100);

// Radial gradient
const radialGradient = ctx.createRadialGradient(200, 200, 10, 200, 200, 100);
radialGradient.addColorStop(0, '#E91E63');
radialGradient.addColorStop(1, '#3F51B5');
ctx.fillStyle = radialGradient;
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI * 2);
ctx.fill();

Example 32.4: Gradient Effects

Apply different gradient types to shapes:

32.6 Transformations

Transform your drawings with translation, rotation, and scaling:

// Save current context state
ctx.save();

// Translate origin to center
ctx.translate(200, 150);

// Rotate 45 degrees
ctx.rotate(Math.PI / 4);

// Draw a rectangle centered at new origin
ctx.fillStyle = '#2196F3';
ctx.fillRect(-50, -50, 100, 100);

// Restore to original state
ctx.restore();

// Draw a rotated triangle
ctx.save();
ctx.translate(300, 200);
ctx.rotate(Math.PI / 6);
ctx.beginPath();
ctx.moveTo(0, -50);
ctx.lineTo(50, 50);
ctx.lineTo(-50, 50);
ctx.closePath();
ctx.fillStyle = '#FF9800';
ctx.fill();
ctx.restore();

Example 32.5: Transformations

Apply transformations to create interesting compositions:

32.7 Applying Shadows and Effects

Enhancing Visuals:
  • Use shadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY to create depth
  • Combine with gradients for realistic lighting effects
  • Apply globalAlpha for transparency effects
  • Use clipping paths to constrain drawing areas
  • Experiment with compositing operations for creative effects

Clipping Paths

Define custom shapes to constrain drawing areas

Global Alpha

Set transparency for all subsequent drawing operations

Compositing

Control how new content blends with existing content

Performance

Optimize complex drawings for better performance

❮ Previous Lesson Next Lesson: Creating Objects ❯