A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/apis/canvas/CanvasRenderingContext2D/stroke below:

stroke ยท WebPlatform Docs

stroke Summary

Traces the intended path, using the CanvasRenderingContext2D object for the line styles, and then fills the combined stroke area using the strokeStyle attribute.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax 
 context.stroke();
Return Value

No return value

Examples

Basic example that shows how to draw a dark green circle with a light green outline


ctx.fillStyle = 'green';
ctx.strokeStyle = 'lime';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();

Complete example that shows how to draw a dark green circle with a light green outline

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</title>
  <script>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  
        var ctx = canvas.getContext("2d");

        
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        
        ctx.fillStyle = 'green';
        ctx.strokeStyle = 'lime';
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

      }
    }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
Notes

Use the beginPath method after you call the stroke method to close the existing path and start a new one with different properties.

Related specifications
HTML Canvas 2D Context
W3C Candidate Recommendation
Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4