Click here to Skip to main content
15,356,336 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, coding guys,

I tried to think of a funny thing that could be available in my error pages in this server, so I thought maybe users could draw all over on the error page.

So, I tried to concatenate mousemove and onclick events, but when I tried my best to do the mousemove part, I failed. Apperantly, when you move in this page, the whole document gets flooded with black paint in a line, like this:

Image

What I have tried:

draw.js
document.addEventListener("mousemove", function(e) {
	paint = document.createElement("img")
	paint.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAADZJREFUKFNjZEAF/9H4jDA+nAEUQFeEogamEJciuGKQQkKKwIoHWCHICYTcyUhy8MCCAWeAAwB92woH3l9sPAAAAABJRU5ErkJggg=="
	paint.style.position = "relative"
	paint.style.top = new String(e.pageY)
	paint.style.left = new String(e.pageX)
	paint.style.zIndex = 100
	document.body.appendChild(paint)
})
Posted
Updated 27-May-22 0:11am
v2

1 solution

You should avoid creating new images for each movement, that's a quick way to flood your document with tons of elements which could cause problems. Instead, try using a <canvas> to render your drawable area. I've put together a small example JSFiddle - Code Playground[^] for how you might accomplish it. Granted it needs some tweaking, and I think the canvas being the top-most element might affect access to links etc.
   
Comments
Tyrunt.new("Rix") 27-May-22 6:29am
   
Well kinda is the answer, you see now, the whole canvas is stretched out...
Chris Copeland 27-May-22 6:59am
   
You may need to play around with setting the canvas dimensions via JS based on the document height and width. Ultimately I think this would be the best way to go, but the example I put together was just a proof-of-concept really 😊
Tyrunt.new("Rix") 27-May-22 8:03am
   
You meant `canvas.width` and `canvas.height`?
Chris Copeland 27-May-22 8:10am
   
I guess so, see this StackOverflow answer[^] for details on ensuring the canvas is resized correctly.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900