0

So what I'm trying to do is draw the outline of a body and fill it in with a user selected color. What I have right now is this initiation of shapes (the second one is iffy):

let shapes = [new Path2D('M 100 600 L 100 500 C 100 350 150 300 200 300 Q 225 295 225 250 C 150 200 150 50 250 50 ' +
                         'C 350 50 350 200 325 250 Q 320 255 300 255 Q 300 295 325 300 C 375 300 425 350 425 500 L 425 600'),
              new Path2D('M 50 600 L 50 500 C 50 350 100 300 150 300 Q 210 295 210 250 C 135 200 135 50 235 50 ' +
                         'C 350 50 350 200 325 250 Q 320 255 300 255 Q 300 295 310 300 C 425 300 475 350 475 500 L 475 600')

this draw function:

function body(ctx, stroke, fill, shape) {
  ctx.strokeStyle = stroke;
  ctx.fillStyle = fill;
  ctx.stroke(shapes[shape]);
  ctx.fill(shapes[shape]);
}

and the body() function is called with the "fill" as a user-selected color, and the "shape" as a number. My problem is, making these paths with JavaScript or SVG (the paths are in SVG because that's less tedious than plain JS) is really tedious and involves a LOT of trial and error and refreshing. I want to make this as diverse as possible, with different face shapes and different sizes, but this method is draining and I don't think I have the attention span or motivation to do more than maybe 3 or 4 shapes this way. I can draw, though. And I can make transparent PNGs that are just the outline. Is there a way I could treat a PNG as a path or something so that I can draw the image on the canvas and then fill it with whatever color the user picked?

Raphael Morgan
  • 190
  • 15
  • 1
    If you can draw, then why don't you draw your SVGs in [Inkscape](https://inkscape.org/) for example? – Sphinxxx Jun 18 '21 at 04:17
  • Or you can record your own mouse movement while drawing on the canvas. That way you don't have to type all the coordinates manually. I found this example code: https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse – Kokodoko Jun 18 '21 at 08:13
  • All we have to do is make the png totally white/black, then use in as a mask on another rectangular shape (whole canvas) filled by any color. So you'll get any color and any shape user wants. In fact no need to use PNG for mask, but a silhouette black and white image instead. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing - operations to use one image as a mask. – Leonid Jun 24 '21 at 03:55
  • Also you can combine both outline and shape in single png file. For example, the outline - black, whole figure - white, and background - transparent. In that way, you have enough information to create stroke-like figure and fill it by any color. Use diffrent compositing types to create those effects. – Leonid Jun 24 '21 at 04:15

0 Answers0