Поместите мой 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);