Home & blog  /  Scripts  /  view post  /

Spraycan - vandalise your page

Overview

Spraycan is a pointless if mildly entertaining plugin that allows visitors to treat your site as a graffiti wall. They can paint anywhere on the screen by clicking and dragging the mouse. A tools panel allows them to select the colour and size of the brush. A button to the top right of the screen, put there by the script, closes the plugin and returns to seriousness.

Usage

Simply call spraycan() in a function or link href, and the script does the rest. Everything is DOM-scripted - there's no dependent CSS.

^^ top of page

Example

Here's the code behind the example, applied to the button's onclick attribute:

javascript:spraycan();

^^ top of page

Notes

Dependencies (none!)

Like most of my scripts, everything is contained and done within the single script file. There is no external CSS to plug in.

Text select issue

Clicking and dragging around the screen always means unwittingly selecting the text on the screen. As far as I know this is unavoidable in everything but IE. IE provides a specialist method for disabling text selection, whereas in Mozilla and other browsers you can only return false from a mousedown event. But that's not really an option for a plugin that listens for mousedown to know when to start painting!

Performance

Since each brush stroke means the appendage of several elements to create the effect, this can cause slow-down if you do a lot of painting, but much depends on the quality of the browser's JS engine and your system. If you want to be on the safe side, change line 229 so the for loop runs only twice, not three times, or even once if you don't care about anti-alias.

Loading jQuery

By default, this script assumes you're loading jQuery via Google (why might you do this?). If, instead, you're loading jQuery from a local copy in your site folder, update the document ready handler (DRH) in the script file:

1//loading jQuery via Google

2google.setonloadcallback(function() { ...

3 

4//loading jQuery from local copy (use either)

5$(document).ready(function() {...

6$(function() {...

^^ top of page
post new comment

Comments (9)

Saul, at 17/11/'10 18:27, said: 
It would be cool to have the color picker be draggable. The easiest way to do that, I think, would be via jQuery UI's draggable, and should be as simple as adding a cp.draggable() call... the downside is that Google's hosted version is around 200k. A locally hosted core UI should be less than 50k, though, and that seems more viable.

Also, have you considered wrapping the page in a div? That might do the trick as far as keeping it from selecting text...
Ben, at 20/04/'11 23:23, said: 
Hey! I think stuff like this is useful! I added it to my painting site because it made sense. Any tips on how to change the cursor when in painting mode?

Thanks again!
Paudie, at 3/10/'11 22:11, said: 
Excellant spray can feature,wanted to include this in a personal website.Having trouble getting it to work.Could you provide the rest of the code I need to link the jquery to my web pages etc.
Thanks
, at 4/10/'11 09:05, said: 
Saul - not tried the div idea. Guess it might work, but the problem is lifting up the page and putting it in a new container will cause a repaint, which will adversely affect any Flash or inline scripts.

Ben - currently there is no support for different cursors. I may add this in at a future time.

Paudie - including jQuery into your page environment is simply a case of linking to it via a script tag. This can be done by hosting jQuery yourself, i.e. having a literal file of it on your server, or by calling it from CDN e.g. Google. There are many examples of this, not least in the source code of this page.
Paudie, at 4/10/'11 15:22, said: 
Thanks for replying,im still having trouble with the script.
I have linked it via a script tag                            ,
and have created a button ,

.
I have both the js and html page saved in the same folder - am I missing anything else.
Thanks
Mitya, at 4/10/'11 16:36, said: 
Do you get any Javascript errors in the console? Can you post a link to your effort?
Paudie, at 4/10/'11 18:31, said: 
No I aint getting any Javascript errors.
The website Im workin on is just part of a project so im running it through notepad++ so im unable to provide you with a link.
Is there anything else I need to include in my code apart from the script tag and button.
Mitya, at 4/10/'11 19:43, said: 
There is an endless number of reasons as to why it might not be happening for you. Without a link it's impossible for me to help.
Jonas, at 16/12/'11 22:12, said: 
Hi! This is a wonderful prank tool IF you could do like XRAY (Make a bookmark) and when clicking on that bookmark it loads the CAN script to that computer/ webbrowser. Then ya can spray your friends actual screen while on lunch... or even better - when starting to click it become a spray dot...
post new comment