for children i want them to let them paint canvas-figures.
it seemed to work by only using hypes symbols.
from illustrator i exported canvas-code and placed it in a rectangle to get the canvas.
but i´m not able to pant this canvas.
i tried @h_classen canvas painting tool - great work - but not what i want to do.
my work is much simplier 
so does anyone have experiences with this?
here´s my example - choose your favourite color:
paintCanvas.hype.zip
(644,5 KB)
thanx a lot
hi @strmiska
Working with SVG’s you want to use the “fill” css selector. Give the element (SVG) shape an ID. In your example it already has the ID “object” just change this to whatever you want.
el = hypeDocument.getElementById('myID');
el.style.fill = "..."
This works fine on shapes. But I noticed you used a path and because of the output from Illustrator it is treating it as a stroke and won’t work well. (i.e it will fill the path (read stroke) and not what’s inside it.)
If you remove the code from "C326.2,123,309…"onwards it will now be a path that is treated like a shape. You can initially set this to be fill: none; so it doesn’t show as black and then giving the SVG an ID as stated before you can now fill it 
@strmiska im also looking for something like this is it now owrking properly can you upload the working versio of the paint Canvas. Thank you
ok, this is how i can change manually the color of a SVG within hype, but it doesn´t work onClick.
onClick always the rectangle of the SVG is colored, but not the SVG-shape itself.
paintCanvas.hype.zip (643,2 KB)
Try giving the “path” and “polygon” the ID’s instead of the “SVG” tag.
thanx again - got it now. the only thing is, that the onClick-section depends on the rectangle, not on the path of the canvas.
but i can live with that. 
working example: paintCanvas.hype.zip (643,6 KB)
You could add an event listener. As you are using JS anyways why not. You could just add the listener on scene load. Something like:
colorFill = function (el) {
el.addEventListener('mouseover', function () {
el.style.cursor = "url('${resourcesFolderName}/pinsel.png') , default";
el.addEventListener('click', function () {
el.style.fill = "#fffdcd";
})
})
}
You can then call this function whenever you want. Another scene load function, just underneath, on an element mouseover.
// shape1 is the ID of the path
colorFill(hypeDocument.getElementById('shape1'))
YESSS! this is the solution. you helped me again very useful - thank you very much!
see working example - the ID is the path or the polygon - as you mentioned.
so it is being colored only by touching them directley.
@wasura - here´s the working example for your needs:
paintCanvas.hype.zip (644,1 KB)
Thank you soo much