将我的 fillRect 放在前台

Question

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

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);

将我的 fillRect 放在前台

Put my fillRect in the foreground

canvas

html5-canvas