如何在画布周围绘制边框

Question

I am drawing an image on a canvas with white background color. I want to draw a border around the canvas and I am unable to do so. Here is my code:

canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText(chartId, 0, 50);
context.drawImage(image, 0, 0);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background

after this i want a red border to appear around the whole canvas.

Answer 1

Set context.lineWidth to 2 , set context.strokeStyle to #FF0000" , and use context.strokeRect , not fillRect . globalCompositeOperation if set to destination-over , then the newly apply thing will use canvas's value, so change to source-over . Used lightblue to fake the drawImage in your code

 var canvas = document.getElementById('cv'); canvas.width = 400; canvas.height = 300; var context = canvas.getContext('2d'); context.fillStyle = "black"; context.font = "50px Arial"; context.fillText('ASD', 0, 50); context.globalCompositeOperation = "destination-over"; context.fillStyle = "#00FFFF"; context.fillRect(0,0,canvas.width,canvas.height);//for white background context.globalCompositeOperation = "source-over"; context.lineWidth = 2; context.strokeStyle="#FF0000"; context.strokeRect(0, 0, canvas.width, canvas.height);//for white background 

 <canvas id="cv"></canvas>