Painting with fat lines

Painting with fat lines

Hi Three.js followers,

I would like Someone suggests a right way to convert mouse position !!!
This workaround (with iframe) is not a good project.
I would like to get correct mouse position calculation and have resize option !!!

the new link:

the old link:

Again, Thanks for the great Three.js Team!

Jose Roberto Lazzareschi


In Suica I get the position like this:

findPosition( domEvent )
	var canvas =;

	// get pixel position withing the Suica canvas
	var rect = canvas.getBoundingClientRect(),
		pixelX = Math.floor( domEvent.clientX - rect.left ),
		pixelY = Math.floor( domEvent.clientY - );

	// get relative pixel position (ie. [-1,+1])
	this.raycastPointer.x =  2*pixelX/canvas.clientWidth - 1;
	this.raycastPointer.y = -2*pixelY/canvas.clientHeight + 1;
	return [pixelX-canvas.clientWidth/2, -pixelY+canvas.clientHeight/2, 0];


  • The color selection can be made with <input type="color"> as shown here
  • Negative width produces interesting result (no lines, just dots):
1 Like

Hi Pavel,
Thank You very much for the attention.
I will try it and see it working. :wink:

This is new version, with a better mouse position calculation!

And the color choose way as You suggested!

1 Like