|
Cut and Paste JavaScript Home / Coloring Book Script Page Note: This page may take a second to load due to drawing the coloring book. We at Cut and Paste JavaScript are dedicated to restoring great childhood memories... like coloring books! So that's why we created this script. It has absolutely no practical use that we can think of, but it sure is fun! Using the three variables that you define (board_width, board_height, and pixel_size), it creates a drawing area. There are ten colors and 3 tools available to you so that you can color to your heart's content. You will notice that the paint bucket only fills a fairly small, diamond-shaped area. We originally had it acting like a normal paint bucket in a drawing program that just filled until it ran up against another color. But it caused a few browsers to crash, so we just cut down on its maximum spillage area and it works fine. As an added bonus, we have set up some pages to facilitate creating default pictures for your coloring book. You can draw a picture and then encode it. If you follow the instructions, it will then become your default picture for the coloring book. Here's a little demo for you to try out. Enjoy! |
Change color by clicking on a color:
Change your tool by clicking on a tool
 Paint brush |
 Pencil |
 Paint bucket |
|
Enter the specs and then click the button to go to the Default Picture Creation Page. You will be able to draw a picture and then encode the drawing into a form element which can be placed in your Coloring Book Script. If the form element is present, the the coloring book will start with that default picture showing. If not, the coloring book will start blank (plain white). Enter the size specifications below and then click the button. In the example above, the width is 20, the height is 25, and the pixel width is 7. Warning! We do not recommend that you create a coloring book bigger than 30 by 30! If you make it too big, it will crash your browser. Be forewarned! If you already have created a default picture and you want to modify it slightly, you can use the Default Picture Modification Page. Just enter the appropriate sizes and click the button: |