canvas is cleared on mousedown, sketch.js & jquery 2.0.0

Question

11I'm using sketch.js from here: http://intridea.github.io/sketch.js/ and jquery 2.0.0

On my page, I have a list of images presented like so:

<a href="http://url.to/image"><img src="http://url.to/image"><br><span class="background">click for background</span></a>

and a canvas, set up like so:

<canvas id="simple_sketch" style="border: 2px solid black;"></canvas>

relevant JavaScript:

var winwidth = 800;
var winheight = 600;
$('#simple_sketch').attr('width', winwidth).attr('height', winheight);

$('#simple_sketch').sketch();
$('.background').on('click', function(event) {
    event.preventDefault();
    var imgurl = $(this).parent().attr('href');
    console.log('imgurl: ' + imgurl);
    var n = imgurl.split('/');
    var size = n.length;
    var file = '../webkort/' + n[size - 1];
    var sigCanvas = document.getElementById('simple_sketch');
    var context = sigCanvas.getContext('2d');
    var imageObj = new Image();
    imageObj.src = imgurl;
    imageObj.onload = function() {
        context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
    };
    alert('background changed');
});

Backgrounds are changed just as I want them to, but whenever I click on the canvas, the backgound image is cleared. As per a suggestion on this thread: html5 canvas background image disappear on mousemove I commented out this.el.width = this.canvas.width(); on line 116 of sketch.js, but to no avail.

Any help appreciated!

EDIT: jsfiddle: http://jsfiddle.net/RXFX4/1/

EDIT: Couldn't figure out how to do this with sketch.js, so instead went with jqScribble (link posted in comments) which has the ability to do this as a built-in function instead.

the sketch.js actually used in the project is this one: https://www.box.com/shared/static/fc4al6qkiva9n3t813th.js it has a few edits that are not in the one on jsfiddle. — BjornP, Aug 22 '13 at 00:10
I now also notice that the canvas gets redrawn when mouse leaves canvas... :/ — BjornP, Aug 22 '13 at 00:21
jqScribble can be found here: https://github.com/jimdoescode/jqScribble — BjornP, Aug 26 '13 at 14:51

score 1 · Answer 1 · edited Sep 17 '15 at 09:26

1

Find this line on the library - sketch.js and delete/comment it out.

this.el.width = this.canvas.width();

Good luck

edited Sep 17 '15 at 09:26

Rory McCrossan

331,213
40
305
339

answered Sep 17 '15 at 09:09

Biswas Khayargoli

976
1
11
29

Matt · Answer 2 · 2013-08-21T14:54:47.197

0

Assign the url on the image source after the onload event. If the image is already loaded, the event is probably firing before you are hooking it. Which means that your drawImage is never being called.

var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
};
imageObj.src = imgurl;

EDIT: I'm going to take a shot in the dark here, since I'm not familiar with sketchjs

I'm thinking that your problem is that you are completely re-render the canvas when you click your 'change background' link. Notice that if you draw, then click the change background, you lose your drawing.

However, notice that once you click again, the background disappears, and you get your original drawing back again. This tells me that sketchjs is keeping track of what has been drawn on it's own in-memory canvas, and then it drops it onto the target. The problem, then, is that when this in-memory canvas is drawn, it completely replaces the contents of the target canvas with it's own.

I notice in some of the sketchjs examples, if you want a background they actually assign the canvas a background style. In your example, you are drawing the background directly onto the canvas. The prior probably works because sketchjs knows to incorporate the background style when it draws. However, it does not know that when you drew your fresh background image, it should be using that.

Can you just change the background style on the canvas element, instead of drawing directly on the canvas?

edited Aug 21 '13 at 14:54

answered Aug 21 '13 at 13:03

Matt

41,216
30
109
147

Thanks. Didn't make a difference though. – BjornP Aug 21 '13 at 13:15
@user98680 is the `onload` event firing? – Matt Aug 21 '13 at 13:27
Yes, it appears to be. I added a console.log inside, and it printed alright. – BjornP Aug 21 '13 at 13:42
can you reproduce the behavior on jsfiddle.net? – Matt Aug 21 '13 at 13:56
Ah, thanks. I misunderstood what .background was. I thought that event was for clicking on the canvas. Nowhere in your code do I see any events for clicking on the canvas, which leads me to beleive sketch.js is watching for click events and doing a fresh render on the canvas. Not familiar enough with sketchjs to know for sure what it is doing though. – Matt Aug 21 '13 at 14:34
sketch.js binds all the following events: click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel. Well, thanks for trying :) – BjornP Aug 21 '13 at 14:45
Thanks for the answer, problem is background style is not possible to save, and we need the sketch to be saved on the background image of choice. drawImage has the ability to rescale the image to the size of the canvas and that's why i want to use it. – BjornP Aug 22 '13 at 00:04
Also, background-styles are not **actually** part of the canvas. – BjornP Aug 22 '13 at 00:46

canvas is cleared on mousedown, sketch.js & jquery 2.0.0

2 Answers2