CODEWITHSUNDEEP
javascriptcsscanvas
Aaroniker
Aaroniker

Reputation: 190

Draw path - canvas

i want to draw a simple path in canvas like this:

example

i have allready tried (also im not sure how to create the point with a radius at 440, 400):

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.lineTo(440, 400);
ctx.lineTo(0, 500);
ctx.lineTo(0, 0);
ctx.fill();

but it shows me just a black 600x600 rectangle https://jsfiddle.net/aaroniker/pmgkymch/

Thanks!

Upvotes: 3

Views: 2500

Answers (2)

traktor
traktor

Reputation: 19301

Canvas elements contain rasterized pixel data for an image of the same dimensions as those of the canvas element's width and height attributes, which default to 300 and 150 respectively. Drawing to a canvas element uses pixel coordinates of the canvas unless a context drawing transform is in effect.

Setting width and height of a canvas element in CSS scales the canvas to the dimensions set in CSS when presenting it on screen. As with scaling an ordinary image element, canvas image quality can drop noticeably if a small canvas is scaled to too large a size.

Answer A

You are seeing a black square because you drew onto a 300 x 150 pixel canvas using 600 x 600 coordinates. Filling the oversized path drawn filled in all the actual canvas pixels. The 300 x 150 pixel canvas was presented as a 600 x 600 screen area due to CSS scaling.

Answer B

The context's path drawing arcto method is used to create a rounded corner but you don't need to work out where it leaves the drawing position provided you continue by drawing a line to a known point.

In this example I've set the canvas element dimensions in HTML to 600 x 600, and scaled it to a different size (150px x 150px) in CSS

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var radius = 100; // a number
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.arcTo( 440, 400, 0, 500, radius) 
    ctx.lineTo( 0, 500); // join end of arc to next point
    ctx.lineTo(0, 0);
    ctx.fill();
  }
}

draw();
#canvas {
  width: 150px;
  height: 150px;
}
<canvas id="canvas" width="600", height="600"></canvas>

Upvotes: 1

ecg8
ecg8

Reputation: 1392

As I stated in my comment, the coordinate system gets deformed when you define canvas dimensions in CSS. Use either inline styling (as I've done) or code it into your JS. For the arc you need, use ctx.arcTo(x1, x2, y1, y2, r), where x1, y1 is the point you are arcing around (440, 400 in your case) and x2,y2 is where you want the arc to meet back up with your figure, r is the radius. https://www.w3schools.com/tags/canvas_arcto.asp

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.lineTo(441.2, 392);
    ctx.arcTo(440, 400, 431.2, 402, 8);
	ctx.lineTo(0, 500);
    ctx.lineTo(0, 0);
	ctx.fillStyle = "#008AFF";
    ctx.fill();
  }
}

draw();
<canvas height="600" id="canvas" width="600"></canvas>

Upvotes: 1

Related Questions