How to draw Rhombus/Parallelogram in canvas

Question

I'm a beginner in using the canvas and I need to make shapes on it.

How can I draw a Rhombus/Parallelogram in a canvas?

Something like this:

I have no problem drawing in a rectangle/square with something like this:

var rectangle = new Path2D();
rectangle.rect(0, 0, width, height);

but I have no idea on how to draw a rhombus/parallelogram.

Thanks for anyone that can help.

I don't believe there's a built in way to draw the shape all as one, but it should be pretty simple to just draw the four sides as lines. https://stackoverflow.com/questions/4839993/how-to-draw-polygons-on-an-html5-canvas — DBS, Aug 27 '19 at 15:26
Without any input format it's impossible to give an answer. How do you define these shapes? By their four points? Simply call lineTo. By a width height and skewX and skewY angles? Either you'll need to calculate the four points, either you use the context transform matrix. — Kaiido, Aug 27 '19 at 23:39

d_ghanShyam · Answer 1 · 2021-05-08T09:33:53.030

Drag mouse from top to bottom in straight manner to draw rhombus. Works only ones then refresh browser and try again

let isDrawing = false;
let x = 0;
let y = 0;
var endPoint = [];
var startPoint = [];


const element = document.getElementById('drawFigure');
const ctx1 = element.getContext('2d');


element.addEventListener('mousedown', e => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
  startPoint.push({
    x: e.offsetX,
    y: e.offsetY
  });


});

element.addEventListener('mousemove', e => {
  if (isDrawing === false) {
 
    x = e.offsetX;
    y = e.offsetY;
   
   
    console.log( "x" +x  ,  "y" +y);
  }
});
window.addEventListener('mouseup', e => {
  if (isDrawing === true) {
    x = e.offsetX;
    y = e.offsetY;

    endPoint.push({
      x: e.offsetX,
      y: e.offsetY,
      fillcolor: 'blue'
    });
    drawLine();
    isDrawing = false;
  }
});


function drawLine() {

  ctx1.beginPath();
  ctx1.moveTo(startPoint[0].x,
  startPoint[0].y);

  var half = endPoint[0].y - startPoint[0].y

  var x1 = startPoint[0].x + half
  var y1 = startPoint[0].y + half / 2

  ctx1.lineTo(x1, y1)
  console.log(x1, y1);
  ctx1.moveTo(x1, y1)

  ctx1.lineTo(endPoint[0].x,
    endPoint[0].y);

  ctx1.lineTo(startPoint[0].x - half, y1);
  ctx1.lineTo(startPoint[0].x,
   startPoint[0].y);

  ctx1.stroke();
}
//------------- 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 75);
ctx.lineTo(135, 25);
ctx.lineTo(195, 75);
ctx.lineTo(135, 125);
ctx.closePath();
ctx.stroke();

canvas {
  border: 2px dotted black;
  width: 460px;
  height: 330px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>

  <canvas id="drawFigure" width="560" height="260"></canvas>
  <!---------------->

  <h3>Hard Stoke 1/2</h3>
  <canvas id="myCanvas"> </canvas>
  <!--      --->



</body>

</html>

I edited your example into a running snippet. You can always [edit] your post and then click on the "edit the above snippet" link to add any necessary changes — Alon Eitan, May 08 '21 at 04:43

How to draw Rhombus/Parallelogram in canvas

1 Answers1