How to position Path2D SVG element in canvas?

by

Use the transform to move the path

Using CanvasRenderingContext2D.translate

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.translate(100, 100);
ctx.fill(p);

or using CanvasRenderingContext2D.setTransform

let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.setTransform(1, 0, 0, 1, 100, 100);  // Also resets the transform before applying
ctx.fill(p);

or using CanvasRenderingContext2D.transform

let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.transform(1, 0, 0, 1, 100, 100);  
ctx.fill(p);

More Related Contents:

  1. How to clear the canvas for redrawing
  2. How to save an HTML5 Canvas as an image on a server?
  3. Real mouse position in canvas
  4. Accessing JPEG EXIF rotation data in JavaScript on the client side
  5. Resize HTML5 canvas to fit window
  6. how to draw smooth curve through N points using javascript HTML5 canvas?
  7. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  8. HTML5 Canvas Resize (Downscale) Image High Quality?
  9. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  10. Why is requestAnimationFrame better than setInterval or setTimeout
  11. HTML5 Canvas vs. SVG vs. div
  12. Firefox error rendering an SVG image to HTML5 canvas with drawImage
  13. How to upload image into HTML5 canvas
  14. Cropping images in the browser BEFORE the upload [closed]
  15. How can I stop the alpha-premultiplication with canvas imageData?
  16. dragging and resizing an image on html5 canvas
  17. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  18. How to free up the memory in JavaScript
  19. How to set the image quality while converting a canvas with the “toDataURL” method?
  20. Load image from url and draw to HTML5 Canvas
  21. Canvas image masking / overlapping
  22. Save canvas as jpg to desktop [duplicate]
  23. How to resize then crop an image with canvas
  24. how to draw a wheel of fortune?
  25. Calculate FPS in Canvas using requestAnimationFrame
  26. HTML5 Canvas API – formatting individual words with italics
  27. Converting bytes to an image for drawing on a HTML5 canvas
  28. Split text into pages and present separately (HTML5)
  29. HTML5 Canvas: Get Event when drawing is finished
  30. loading an image on web browser using Promise()

Leave a Comment