Figure drawn in canvas is not appearing

Asked

Viewed 223 times

0

I made the code below to create a canvas that draws in its space a red rectangle. However, nothing appears. I can’t find any syntax error. I’m using Google Chrome:

<!DOCTYPE html>
<html>
<body>
<p> Antes da Canvas </p>
<canvas width="120" height="60"></canvas>
<p> Depois da canvas </p>

<script>
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.fillRect = (10, 10, 100, 50);
</script>

</body>
</html>
javascript html5 canvas

  • Another abandoned question. Do not abandon questions because you may get a bad image in the community.

1 answer

1

The syntax of fillRect is incorrect, should be:

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 100, 50);
<p> Antes da Canvas </p>
<canvas width="120" height="60"></canvas>
<p> Depois da canvas </p>

You must pass the properties in the method by parameters (x, y, width, height) and not by attribution value =.

  • Oh yes, I get it. Just like in Java. Thanks

  • It’s still not working. This computer is old, but it can’t be lack of Html5 support either.

  • Soh works in browsers with Html5 support. But the problem was the syntax itself.

  • Yeah, but it doesn’t work here. You know how I check for Html5 support?

  • 1

    Just install the latest version of the browser... they have support... but enter this site that shows: https://html5test.com/

Browser other questions tagged javascript html5 canvas

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