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.

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.

• javascript
• html
• canvas

• @blex doesn't seem to be working,I am seeing no border – ValarDohaeris Commented Jun 25, 2015 at 9:06
• 1 Ok, canvas.style.border = '1px solid red'; is just adding a CSS border around the canvas, not drawing it on it. See it in action – blex Commented Jun 25, 2015 at 9:11

1 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>