Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 jQuery Paint Plugin - Paint On A Canvas Area With Various Shapes & Colors Including An Eraser

DZone's Guide to

HTML5 jQuery Paint Plugin - Paint On A Canvas Area With Various Shapes & Colors Including An Eraser

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area with various shapes and colors including an eraser. It also features the fantastic Websanova Color Picker allowing you to set both border and fill colors. The canvas area can be set to any size you like and perhaps it’s greatest feature is the ability to save your drawing as an image and then load it back in later. In fact you can load any image in as your drawing as long as it is a base64 encoded PNG image.

Features

  • Menu – Can be moved anywhere on the screen.
  • Shapes – Ellipse, Rectangle, Line, Pencil and Eraser.
  • Colors – Select colors for both border and fill, featuring the Websanova Color Picker.
  • Width – Set the line or border width of the pencil and shapes.
  • Save/Load – You can save your creations and load in any image.


Requirements: jQuery
Demohttp:/ / www. websanova. com/ plugins/ paint/ html5#websanova
License: MIT License or GPL

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Hirvesh Munogee, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}