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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.