How to draw flow chart document shape on canvas?

Question

am trying to draw flow chart document shape ( https://i.imgur.com/ZfWDDfs.png ) on canvas i have partially done it but have hard time with the lower curve as it shows ok it one position but when i change xy coordinates the curve is effected so i wonder how to properly draw the curve in it so that it remain same after coordinate change.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// var x = 150, y = 150, w = 350, h = 350;  // display ok
var x = 50, y = 50, w = 350, h = 350;  // display not ok

 ctx.lineWidth = 10;
 ctx.beginPath();
 ctx.lineJoin="round";
// draw one horizontal and two vertical lines
 ctx.moveTo(x, y);
 ctx.lineTo((x + w)+(w/4), y);
 ctx.lineTo((x + w)+(w/4) , y + h/1.3);

 ctx.moveTo(x, y);
 ctx.lineTo(x, y + h);

// bottom curve .. problem start here
ctx.quadraticCurveTo(x,h + (h/1.2), (x + w/2) ,h + h/4);
ctx.lineTo((x + w)+(w/4), y+h/1.3);
ctx.stroke();

This code using x = 50 and y = 50 :

 let drawChart = function(ctx, points) { ctx.moveTo((points[0].x), points[0].y); for (var i = 0; i < points.length - 1; i++) { // Draw point // ctx.arc(points[i].x, points[i].y, 2, 0, Math.PI * 2, false); var x_mid = (points[i].x + points[i + 1].x) / 2; var y_mid = (points[i].y + points[i + 1].y) / 2; var cp_x1 = (x_mid + points[i].x) / 2; var cp_y1 = (y_mid + points[i].y) / 2; var cp_x2 = (x_mid + points[i + 1].x) / 2; var cp_y2 = (y_mid + points[i + 1].y) / 2; ctx.quadraticCurveTo(cp_x1, points[i].y, x_mid, y_mid); ctx.quadraticCurveTo(cp_x2, points[i + 1].y, points[i + 1].x, points[i + 1].y); ctx.stroke(); } // ctx.arc(points[points.length - 1].x, points[points.length - 1].y, 2, 0, Math.PI * 2, false) // ctx.stroke(); } var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //var x = 150, y = 150, w = 350, h = 350; // ok var x = 50, y = 50, w = 350, h = 350; // not ok ctx.lineWidth = 10; ctx.beginPath(); ctx.lineJoin = "round"; ctx.moveTo(x, y); ctx.lineTo((x + w) + (w / 4), y); ctx.lineTo((x + w) + (w / 4), y + h / 1.3); ctx.moveTo(x, y); ctx.lineTo(x, y + h); // var points = [{x:x,y:y + h},{x:(x + w/2),y:h + h/5},{x:(x + w)+(w/4),y:h/1.3 }] // var points = [{x:x,y:y + h},{x:(x + w/3),y:h + h/2},{x:(x + w/1.2),y:h + h/4},{x:(x + w)+(w/4),y:h + h/5}] //drawChart(ctx,points); ctx.quadraticCurveTo(x, h + (h / 1.2), (x + w / 2), h + h / 4); // ctx.quadraticCurveTo((x + w/2),h , (x + w)+(w/4) , h + h/5 ); ctx.lineTo((x + w) + (w / 4), y + h / 1.3); // ctx.closePath(); ctx.stroke(); // ctx.fill(); 

 <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> 

http://jsfiddle.net/0da2e869/

Answer 1

You have to use :

ctx.quadraticCurveTo(x, y + h * 1.6, x + w / 2, y + h);

The first and second arg was position on your grid.

ctx.quadraticCurveTo(cpx, cpy, x, y);

NB : To improve your draw use ctx.lineCap = "round"; . ;)

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); drawIt(150, 150, 350, 350); // ok ctx.strokeStyle = "red"; drawIt(50, 50, 350, 350); // not ok function drawIt(x, y, w, h) { ctx.lineWidth = 10; ctx.beginPath(); ctx.lineJoin = "round"; ctx.lineCap = "round"; //<========== lineCap ctx.moveTo(x, y); ctx.lineTo((x + w) + (w / 4), y); ctx.lineTo((x + w) + (w / 4), y + h / 1.3); ctx.moveTo(x, y); ctx.lineTo(x, y + h); ctx.quadraticCurveTo(x, y + h * 1.6, x + w / 2, y + h); ctx.lineTo((x + w) + (w / 4), y + h / 1.3); ctx.stroke(); } 

 canvas { /* Focus on the "not ok" */ transform-origin: top left; transform: scale(.25); transition:1s; } body:hover canvas { /* Focus on the "not ok" */ transform-origin: top left; transform: none; } 

 <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"></canvas>