mobomo / sketch.js

A jQuery plugin for dead simple Canvas-based drawing.

Sketch.js

Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases upon which visitors can draw. The code is partially inspired by William Malone's drawing app tutorial as well as CanvasPaint.

Installation

To use Sketch.js in your project, just grab the latest sketch.js from GitHub and include it in your project after jQuery.

Documentation

Documentation can be found on the GitHub Pages for this project.

License

Copyright (C) 2011 by Michael Bleigh and Intridea, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

sketch.js's Issues

sketch is not continous & getting previous stroke onmouseout in ajax call

Hello,
I used sketch.js for my drawing. i have 2 issues here.

1 - I'm not able to draw line continuously (long stroke). It taking some gaps & then it is filling.

2 - I have 4 images & using same canvas for all images. If i draw a line & den go to next image (ajax call & clearing canvas also) & onmouseout i'm getting the previously drawn line. I don't know why ? plz help me
it is very urgent ..

Opacity of data-color (stroke)

How do i change the opacity of the fill color for the lines? I'd like to add this "opacity: 0.6;" to the tag but when i append the stroke color it does nothing. Any help would be greatly appreciated.

$.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
          $('.tools').append("<a href='#the-canvas' data-color='" + this + "' style='border: 1px solid black; width: 30px; font-size:17px; background: " + this + "; display: inline-block;'> &nbsp;&nbsp;</a> ");

Lines not stored on touch enabled browsers

When drawing with the mouse:

• clicking
• draw something
• mouseup
• mousedown
• Result: first line is saved, second will be drawn.

When tochstart (tested on iOS & Win8) ->

• clicking
• draw something
• mouseup
• mousedown
• Result: First line vanish.

Getting the error:
Uncaught TypeError: Cannot read property 'pageX' of undefined sketch.js:100

Mobile Error on method onEvent (with correction)

Hi, I was getting an "undefined getX" or "undefined getY"
Because e.originalEvent.targetTouches had length 0 on last touchevent, that caused canvas to be
wiped clear.

Sketch.prototype.onEvent = function(e) {
      console.log(e.originalEvent.targetTouches);
      if (e.originalEvent && e.originalEvent.targetTouches) {
        if (e.originalEvent.targetTouches.length){ ///-----------> Added
          e.pageX = e.originalEvent.targetTouches[0].pageX;
          e.pageY = e.originalEvent.targetTouches[0].pageY;
        }
      }
      $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
      e.preventDefault();
      return false;
    };

support for touchscreens

How do add support for touchscreens?

Can only draw 1 stroke on Android Chrome browser

Step to reproduce

1. Launch http://intridea.github.io/sketch.js/ on Android Chrome Browser
2. Try to draw something on the "Simple example"
3. The first stroke will be shown correctly.
4. The second stroke will also be shown correctly. However, the first stroke will be cleared.
5. The third stroke will also clear the canvas.

Tested Environment:

1. Samsung Galaxy Note 2 + Chrome 29.0.1547.72

How could i edit previous drwant skecth?

I am using below code for populating the previously saved sketch and trying to edit it, but it got refresh as soon as I start sketching over. May I know how to get this working properly!

var ctx = document.getElementById('colors_sketch').getContext('2d');
var img = new Image;
img.onload = function(){
ctx.drawImage(this,0,0);
$('#colors_sketch').sketch();
};
img.src = 'data:image/png;base64,iVBORw0KG.....'

Preloaded canvas gets cleared - why?

Hi there,

Thanks for this great tool! Quite handy...
I just have one problem, I'm trying to load/save the drawings. With a quick test I did this over a textarea:

https://gist.github.com/solars/c1cf0efbb1b4870a4974

However, when I load the drawing, and move the mouse over and out of the canvas, or draw again on the canvas, it gets deleted... can I prevent this somehow?

Thanks,
Christoph

Solution for improved performance on mobile (tested on iPad)

In using sketch.js on iPad, I have noticed serious performance degradation as more and more actions are added to the action list. I've never really used HTML5 canvas before (so I haven't pushed this code in, just in case I'm doing something very wrong).

Basically, my fix involves rasterizing the content of the canvas periodically. I create an image buffer, then every few actions (currently every 10, but feel free to change), I take the entire canvas, copy it into an image buffer, then clear the action list.

So far this has massively improved performance for me on iPad (where it would previously slow to a complete crawl once anything more than a basic sketch was drawn).

Here is a gist containing my code. Please let me know if you think I should add it in and create a pull request (unless someone else would like to do it).

https://gist.github.com/buncle/6032693

It currently defaults to no-buffer, so the default behavior is not affected. In order to use this image buffer, you should provide {buffer:true} when initializing sketch.js.

(P.s. as an added bonus, I have a 'clear' tool built into this code that seems to work cross-platform... simply create a tool using a "data-clear" attribute)

How to save sketch with background image

i try to save and download with background. but saves without background. how to solve this problem,

Zoom in/out

Any ideas how we can add zoom in/out?

Simple technique for clearing a sketch and keeping it cleared?

Dude I'm loving this library, it's SO GOOD.

I was hoping there was an easy technique for clearing a sketch and keeping it cleared when you start drawing? I've tried both of these:

canvas.getContext('2d').clearRect(0,0,width,height);

canvas.width = canvas.width;

They both clear the sketch initially, but as soon as you start drawing again your original sketch reappears!

Of course what would be really awesome would be adding a data-clear="true" attribute to any random element. :)

Nothing drawn on touch only (without touchmove)

Very new to sketch.js, so I apologize if I have missed something obvious, however I have found that nothing is drawn if you simply tap within the canvas (without actually moving away from the touchstart point).

Any idea how I could go about doing that? (i.e. simply touching a part of the canvas leaves a single 'blob'?)

Edit: I should note that this same behavior occurs on mobile (iPad) and desktop browsers.

how can i get the height and width of the skectched area?

Hello,
While refer the following example link http://intridea.github.io/sketch.js/ in tools example, how can the get the height and width of the marked yellow color on image.?

Eraser is not working

Hi,

Eraser is not working when erasing the line.It get clear instead of erasing
Also check on this link http://intridea.github.io/sketch.js/

Send Image in HTML form

Hello,

How I can send the image through an HTML form? Ie within a form, draw and send (upload) the image on the form.

Thank you.

return two different object ... which is wrong...

If I see the code here in sketch() like this...

} else if (sketch) {
  return sketch;
} else {
  this.data('sketch', new Sketch(this.get(0), key));
  return this;
}

these two returned object are two different ones... does any one knows the login behind...

Last action on canvas can't be detected in mobile chrome browser.

Hello, currently i developing a sketching function in my system using coldfusion and sketch.js. Those source can run perfectly in window browser, but when tested with mobile chrome browser, the last action on the canvas (no matter is delete or sketch) can't be detected and save. I have search through the web, there is no solution on this problem. Anyone can guide me to solve this problem? TQ.

Add git tag

Hello @mbleigh,
I am the member of cdnjs project.
We want to host this library.
Please help us add git tag.
Git tag can help us to know your release version.
Or if there is a release on npm?
Thanks for your help!

cdnjs/cdnjs#8675

Stop of painting

There is a way to stop detach the paint tool of the canvas? When I click a button, i want that the canvas froze the paint and not allow add anything more.

Sketch.js on Andriod Tablet

Currently I am facing issue with Android tablet? the problem is that once you draw a line and start with new line the previous line will remove ,Can you please suggest me where I am wrong.
If we continues the touch means it will be okay if we leave the touch and again starts we will get this issue,

Please give me suggestion to solves this issue.
Thanks

Drawing dots not working

When you just click and don't move the mouse, sketch.js doesn't draw a dot. Is there any way to enable this?

Responsiveness

What about responsiveness? I implemented this plugin on a responsive website, but if I draw, for example, a big sun in a resolution of 1920x1080 and resize the screen to 1024x768, the drawing moves horizontally and loses its proportion related to the background... :'(

Sketch cannot be used on Android 6.0

Hi everyone,

It works perfectly in IOS system, but not for android system.
I tested with HTC M8 using Android 6.0, i cannot draw anything while i can do it on my ipad and iphone. Can anyone know what should be adjusted to make it run properly in Android browser.

Thanks.

Time to move? New repo.

This repo is abandoned.

There are a lot of pull requests that resolve some bugs, but @intridea do not appears to care.

Can someone fork this, accept the pull requests and make this script live again?

Get Canvas Image

Hi, I've just added sketch.js on my project and it works greats!
I have only one problem: I need to store the image 'sketched' in my db but if I can to try to get it I obtain a blank image :-(
How I can do it?
With this code toDataURL is always the same and represent a blank image
....
canvas = document.getElementById('canvasDiv');
var ctx = canvas.getContext("2d");
canvas.width = '100';
canvas.height = '50';
dataPicture = canvas.toDataURL("image/png");
newPicture = dataPicture.replace('data:image/jpeg;base64,', '');
...

Disable and re-enable sketch

Is there anyway I can disable and enable sketch? Something like

$('#elem').sketch();
$('#elem').turnOffSketch();
$('#elem').sketch()

Eraser on iPad

A while ago, I had opened an issue here on GitHub, about making sketch.js work on the iPad. @leonth was kind enough to provide a workaround to this issue, but I only found out now, that this workaround makes the eraser not work. Anyone knows what to do?

My previous opened issue: #1

Thanks

iPad compatibility

How can one make this great plugin work properly on the iPad? It almost works perfectly, but the problem is that once you draw a line and do mouseUp, and you want to draw some more, it does that but it erases everything around the new line you are drawing. Seems like there is a white background on the ipad when someone draws.

touchTargets undefined on touchend/touchleave

When drawing on a canvas on a mobile device, there is an error "Uncaught TypeError: Cannot read property 'pageX' of undefined" on the touchend/touchleave bound to the canvas. The script is trying to call "e.originalEvent.targetTouches[0].pageX;", but it appears that on the touchend/touchleave event, "e.originalEvent.targetTouches[0]" is not defined, causing an error and resetting the entire canvas on mobile. You can simply encase the .pageX and .pageY lines in an if statement checking if both .targetTouches[0] and .targetTouche[0].pageX are defined. See any below:

http://stackoverflow.com/questions/21311073/sketch-js-pagex-undefined-error/22976319#22976319

Cannot draw multiple times in iPad safari

Reset / clean mantainig background

Hi there is a possibility to create method for clear?
is possible too destroy and reistance object...
i need delete every stroke and refill canvas with my background image
what can i do?

thanks

Alpha (opacity) is applying for previous strokes

Hello everyone,
I'm facing an issue with sketch.js, that is when applying an alpha value (opacity) to color, it works fine for the first stroke but when i'm drawing second stroke, the alpha value of the previous stroke is increasing.

*For every new stroke the opacity of all previous strokes are increasing.
Please help me out.

Clear

Hi everyone,

I am having a problem when I use the sketch.js in a mobile phone or in a tablet. The problem is that if I stop sketching and then I continue, the previous sketch is automatically deleted. Why? I need sketch.js to sign, and some signatures may be done using some sckeches.

Draw using ie,firefox,opera,chrome browser windows 8

I am using #7 and #1 ,i draw cavas on ie 10,chrome,opera (windows 8) error : Only mouse over don't click on cavas but still draw cavas.
Thanks and regards,
stormrider

Is this repo death?

I was wondering if this repo is death and if there are any alternatives?

Right angled lines

Hi guys - is there any way to set the options in sketch.js so that the lines it draws are only vertical or horizontal?

Cheers

James