Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
communitycreator

How to fill paths in HTML Canvas

Chidume Nnamdi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

We can use the fill method to paint or fill the content area defined by path(s).

For example, we can use fill() to create paths and fill in the content area.

Example

const context = canvas.getContext("2d");
    context.beginPath()
     context.moveTo(0, 50)
     context.lineTo(50, 0)
     context.lineTo(100, 50)
     context.lineTo(0, 50)
     context.fill()
     context.closePath()

This will fill the content with the color black:

Note: Please refer to the following shots for information related to this topic:
-Drawing lines and paths
-Drawing triangles
-Drawing rectangles
-Drawing circles and arcs

RELATED TAGS

javascript
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring