Figure drawn on canvas is not showing up

0

I made the code below to create a canvas that draws in its space a red rectangle. But nothing appears. I can not find any syntax errors. 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>
    
asked by anonymous 22.04.2018 / 04:43

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 should pass the properties in the method by parameters ( x, y, width, height ) and not by assignment value = .

    
22.04.2018 / 05:14