把我的fillRect放在前台

Question

我想在html5画布中实现一个小图表，但我的光标（粉红色的东西）不在前景中。

var canvas = document.getElementById("quantity"); 
var context = canvas.getContext("2d");

context.translate(0, 0);
context.beginPath();                

context.fillStyle="#777";
context.fillRect(5, 10, 35, 30);

context.lineWidth="5";
context.strokeStyle="#777";    
context.rect(5, 10, 90, 30);

context.fillStyle="#b74e95";
context.fillRect(canvas.width/2, 0, 10, 50);
context.stroke();

Answer 1

以下是更改的代码，但有一些错误更正。

var canvas = document.getElementById("quantity"); 
var context = canvas.getContext("2d");

context.translate(0, 0);

context.fillStyle="#777";
context.fillRect(5, 10, 35, 30);

context.beginPath();
context.lineWidth="5";
context.strokeStyle="#777";    
context.rect(5, 10, 90, 30);
context.stroke();

context.fillStyle="#b74e95";
context.fillRect(canvas.width/2, 0, 10, 50);