How do I draw on a small canvas?

I have a 100 by 100 canvas on my screen that I want to draw onto at runtime using the mouse. The canvas could be positioned at any random place on screen. Its this little square I want to draw on with the mouse.

Using the Fill Rectangle tool, how do I find the correct co-ordinates to draw on this canvas from the mouse position when the mouse is clicked?

I have tried all kinds of offsetting approaches using javascript but I cant get anything to work and it seems overlay complex for a simple task.

Is there an easy way to do this?

Thanks

I thought that too, but doing that and clicking on the canvas somewhere gives me console results like x:3770.6669921875, y:1912.3332519531

I would have thought the result needs to be between 0 and 100 for both x and y.

EDIT: It seems that when I click on the canvas, the canvas is at x:640, y:20 . But the Mouse is at something like x: 4900, y:1900

It looks like the mouse is using different coordinates to the canvas?!?!

How do I fix that? The scale rate is set to 100% on all layers

Perhaps the canvas is on a layer with different parallax or scale rate. You can use new expressions LayerToLayerX and LayerToLayerY to convert mouse coordinates to the layer with canvas coordinates.

You can use expressions Mouse.X(Canvas.layerNumber) and Mouse.Y(Canvas.layerNumber) to get mouse coordinates for the same layer where your canvas is.