search

mobomo / sketch.js

A jQuery plugin for dead simple Canvas-based drawing.
http://intridea.github.com/sketch.js
291 stars 110 forks source link

How to save sketch with background image #12

Open vimalprakashts opened 11 years ago

vimalprakashts commented 11 years ago

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

thinklinux commented 11 years ago

I don't know how are you trying to do that but here is a question that I answered today. It might help you. http://stackoverflow.com/questions/16869857/html5-canvas-background-image-disappear-on-mousemove/16869954#16869954

arachimi commented 11 years ago

When i download my sketch with image background by

<'a href="#tools_sketch" data-download="png" style="float: right; width: 100px;">Download<'/a>

it can save only my drawing line. No background with line i have draw.

what should i do.

Thanks.

anyandallart commented 10 years ago

I am trying to do the same thing, and these are my steps. anyone please feel free to update me with a better solution. I tried "drawing" the image onto the canvas, however the canvas kept getting redrawn and every time it happened the background image went away, so here is what I'm doing:

1) use the canvas as is in sketch.js 2) absolute position the background image behind the canvas. 3) When you're ready to save, draw the background image to a second canvas, then draw the sketch.js canvas on top of that second canvas, then save the canvas to an image file.

moeiscool commented 9 years ago

found out how to do it from a stack exchange answer.

remove this line from your sketch.js lib

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

and the background will save with the canvas drawing.

I tested adding a background with this code and it stayed and saved properly

var imageObj = new Image();imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; ($('#CANVAS_ID')[0].getContext('2d')).drawImage(imageObj,20,20)

please know i used jquery for my above snippet.

valix85 commented 9 years ago

hi guys can you help me? when i reset/eraser for drawing background is clened, i must re fill it with my background image, what can i do? i can delete object and re-create it? what cai i do it? thanks

sferoze commented 7 years ago

@moeiscool the fix you are using does not work because it makes the line drawing very jagged. have you noticed this?

slruslan commented 7 years ago

Hi guys, I've made a fork and fixed this problem. The background isn't saved with canvas because it isn't drawn in, but set with CSS rule. I've implemented a method loadBg, so you can easily load your background and then get full image. Since author doesn't accept pull requests, you can check out the code here: https://github.com/slruslan/sketch.js.