fill (a path command)

suggest change

context.fill()

Causes the inside of the Path to be filled according to the current context.fillStyle and the filled Path is visually drawn onto the canvas.

Prior to executing context.fill (or context.stroke) the Path exists in memory and is not yet visually drawn on the canvas.

Example code using context.fill() to draw a filled Path on the canvas:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.fillStyle='blue';
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents