Draw Square with bold corner
Demo
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="850" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
'use strict'/*from ww w.j a v a2 s.c o m*/
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
// Red rectangle
ctx.beginPath();
//ctx.lineWidth = "6";
//ctx.strokeStyle = "red";
let x = 300;
let y = 300;
let width = 300;
let height = 300;
drawLine(ctx,6,x,y,x+20,y);//left top horizontal
drawLine(ctx,6,x+width-20,y,x+width,y);//left top horizontal
drawLine(ctx,6,x,y+height,x+20,y+height);//left bottom horizontal
drawLine(ctx,6,x+width-20,y+height,x+width,y+height);//left bottom horizontal
drawLine(ctx,6,x,y,x,y+20);//left top vertical
drawLine(ctx,6,x+width,y,x+width,y+20);//right top vertical
drawLine(ctx,6,x,y+height-20,x,y+height);//left bottom veritcal
drawLine(ctx,6,x+width,y+height-20,x+width,y+height);//right bottom vertical
ctx.rect(x, y, width, height);
ctx.stroke();
function drawLine(ctx, lineWidth, x0,y0,x1,y1){
ctx.save();
ctx.lineCap = "square";
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(x0, y0 );
ctx.lineTo(x1,y1);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
</script>
</body>
</html>