Canvas

呂佳恩 Demo Site: Demo

Basic Layout

This is the basic layout of my web canvas There is a background color, but the snapshot did not show the color. The canvas should always be 1/2 of the width of the browser, and 3/4 of the height.(Unless there is an image uploaded, that will be specified later.)

These are the tools that I made. The top row are the shortcuts to the commonly used colors. The second row is the contols for the pen tool, with an input tag for any hexadecimal values you would want to input straight away. Then, there is the color picker, following by a slidebar and a value tag. Both of them control the size of the pen. These control also controls the size of the other drawing tools. The following row are the shapes that I made. Rectangle, Circle, and triangle. This is a video demonstrating how all of them works.

{%youtube 8wamjDMpxVA %}

Sorry for the video quality. The Square and the circle are responsive to the mouse placement. The triangle is a little different from the slides that the TA's provided. The triangle tool requires you to click on the canvas three times. The three positions that you clicked on is the three vertices of the triangle. After the first two click, the canvas will show you the first edge. After all three clicks, the triangle will appear on your screen.

Then, there is the undo and redo button. Next to it are the clear and eraser tool. The eraser size is also contolled by the slide bar. Then, there is the font picker.

The upload and download are the right two for the last row.

Upload Image

If you upload an image, the canvas will automatically resize to fit the image. command

Download image

The format for the download is PNG file. The default name will be "canvas_image"

Grayscale Imgae

This button will turn the canvas into a grayscale using an arithmetic function that looks the best with high contrast.

Invert colors

The final function inverts the color of the canvas. This could be used when you want to convert a negative to a positive.