How to insert an image/picture into a canvas shape

Asked

Viewed 189 times

-2

The code fragment below draws a rectangle in the canvas element, and fills it with the blue color. I want to fill with a figure/external image (such as background). Has as?

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle= "blue";
ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

javascript html canvas

1 answer

0

Okay, after researching some more, I found that the method CanvasRenderingContext2D.createPattern() resolves. See link to the MDN

Grateful for the attention!

  • 1

    This code may be a solution to the question, but your answer might be better if you include an explanation of the key points of the code. The goal is not only to help those who asked the question, but the next visitors as well. Read more on Code-only answers - What to do?.

Browser other questions tagged javascript html canvas

You are not signed in. Login or sign up in order to post.