mobomo / sketch.js Goto Github PK

Any ideas how we can add zoom in/out?

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.....'

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;
    };

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.

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

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...

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

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)

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.?

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

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

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/

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

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

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. :)

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.

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.

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.

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

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.

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

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.

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

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.

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... :'(

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.

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 ..

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

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

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

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

How do add support for touchscreens?

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?

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

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,', '');
...

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> ");

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