Practicing with JavaScript

Home

home

Java

autorenew

Python

autorenew

GitHub

autorenew

Resume

autorenew

Bibliography

autorenew

jQuery Practice

I am not adept with JavaScript yet, and certainly not with any JS frameworks, but I am giving jQuery a shot because it seems to be popular and it is straight forward. There is a button at the end of this paragraph that will take you to a page that I am developing for Technology Rediscovery LLC.


JavaScript Canvas Application

The first javascript application from Learning JS 3rd Edition. In the opening chapters, Ethan Brown takes us through building simple HTML and CSS pages and a corresponding JS script that utilizes the HTML5 canvas element. The JS code imports the paper.js library and I then tweaked and tinkered with the code. The book does not show us how to draw lines, rather Brown explains the use of for loops to generate shapes on the canvas element. He briefly describes mouse events and from here I picked up the paper.js documentation to create a somewhat finished canvas app. My JS script contains a short random number generating function that is used to change the width of the canvas brush each time the button is clicked. This function also is used to return a value from 0 to 360 that is then set in hue property of path element from the paper.js library. Paths are used to create lines in the HTML5 canvas element. This app is not perfect yet, but I was finally able to scale the canvas element with changing browser size. The bug occurs here when the user goes to draw on teh canvas again. Their mouse will be off center from where the brush is actually painting on screen. Some day it shall be conquered...for now, enjoy the pretty colors.

Click and drag the mouse to draw a line: