Skip to content

Latest commit

 

History

History
22 lines (16 loc) · 1.17 KB

File metadata and controls

22 lines (16 loc) · 1.17 KB

Sketchpad

Today, I decided to fiddle around with HTML5 canvas api. I tried to create a sketchpad like ms paint, with basic features like color selection , brush thichkness, Eraser all using vanilla javascript. I also added touch support using events like touchstart, touchmove. Although using a library like hammer.js would have made things a lot easier but that would have been outside this challenge to build everything using vanillaJS.

Challenges

  • canvas api (setting height, width, stroke, color)
  • reading input element values via js
  • touch events (single touch)
  • custom cursor

screenshots

screenshot1 screenshot2 screenshot3

code pen

<iframe height="265" style="width: 100%;" scrolling="no" title="HTML5 Sketchpad" src="https://codepen.io/neeraj-mukta/embed/RwWWBNw?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen HTML5 Sketchpad by Neeraj Mukta (@neeraj-mukta) on CodePen. </iframe>