Please help on my final project (Javascript (canvas))

JavaScript
1

Hello!
So my final project is creating a mandala maker. Please check out this codepen ( https://codepen.io/nathar/pen/xQBGQz ) , click around and you’ll be able to create shapes.
I have two questions about it.

  1. How can I add a table full of colors under the “Colors” heading? I want people to click on a color, then “paste” it on the different shapes created

  2. How can people save their mandala to their computer as a png? I just want the mandala saved and not the entire canvas (full of the text, etc)

Any help is deeply appreciated.

2

If something is unclear I can explain!

3

For taking a color input from the user, you can try the <input type="color"> html. This will allow the user to provide an input which you can then manipulate using javascript. As for the ability to color each segment of the mandala, it is very tricky as all the shapes exist on the same layer as conjoined entities. Try to shift each iteration of mandala generation to a new layer, after which you can allow the user to select layers based on which part of the mandala is clicked.
Hope this helps.

1 Like
4

Thank you for your reply. Any idea on how to create a new layer per each shape?

5

Any help? :frowning:

6

An html implementation of layering can be found in pure css parallax effect, where each element is placed on a different ‘layer’ to give them different scrolling speeds.
Another and perhaps more suited method for you would be to generate a new canvas on top of the existing one for each new click.
Hope this helps.

1 Like
7

For 2, this should be really easy (I think this is correct, not tested though):

const canvas = document.getElementById('your-canvas');
const image = new Image();
image.src = canvas.toDataURL('img/png');
// Then maybe dump the image somewhere
// on the page?? It's just an image now, so do
// whatever you want with it
document.body.appendChild(image);
1 Like
8

You can use saveCanvas, but you have to have a separate canvas for the graphics and one for the text, otherwise, you get an image with the text. However that was easier said than done and i have to say the API docs aren’t that great, but i got a bit stubborn and i guess it was sort of fun to play around with, also Google. I have changed some stuff but hopefully, you can still get something out of it.

Here is a Codepen you can check out.

  1. Not sure how to attach an event listener to the save text. I added a double click and button method instead. It seems like it should be as easy as saving the text to a variable and attach the listener to it (like you can do with a canvas, an image or the button), but it didn’t seem to work, or i just failed at it.

  2. I moved the text to the setup instead of the draw function, i have left the draw functions in but they are empty.

  3. I use mouseClicked instead of mousePressed (unless you want to trigger on right click, but that seems like unexpected behavior to me).

  4. I added a color picker, but it just sets the fill color for the shape.

1 Like
10

Wow… you’re so amazing, thank you!