Hello, good morning. I have a still image on the canvas and some buttons to draw or delete what was drawn, but I have a problem: when I use the delete button it deletes everything (including the image) and I would like to delete only what was drawn. Is this possible?
I will leave the code below (I do not know how to make the buttons appear to you, but if it is possible to at least give me a light of what to do based on what was sent, I thank you)
$(function() {
var c = document.getElementById("desenho");
var ctx = c.getContext("2d");
var img=new Image();
img.crossOrigin = "Anonymous";
img.src="https://app.tisaude.com/c/fichas/1873_fisioterapia.png";img.onload=function(){ctx.drawImage(img,0,0,730,350);}$('#desenho').sketch();$("#enviaprontuario" ).click(function() {
var c = document.getElementById("desenho");
var dataURL = c.toDataURL();
$( "#{$q23_id}" ).val(dataURL);
$("#sProntuario").submit()
});
});
var __slice = Array.prototype.slice;
(function($) {
var Sketch;
$.fn.sketch = function() {
var args, key, sketch;
key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
if (this.length > 1) {
$.error('Sketch.js can only be called on one element at a time.');
}
sketch = this.data('sketch');
if (typeof key === 'string' && sketch) {
if (sketch[key]) {
if (typeof sketch[key] === 'function') {
return sketch[key].apply(sketch, args);
} else if (args.length === 0) {
return sketch[key];
} else if (args.length === 1) {
return sketch[key] = args[0];
}
} else {
return $.error('Sketch.js did not recognize the given command.');
}
} else if (sketch) {
return sketch;
} else {
this.data('sketch', new Sketch(this.get(0), key));
return this;
}
};
Sketch = (function() {
function Sketch(el, opts) {
this.el = el;
this.canvas = $(el);
this.context = el.getContext('2d');
this.options = $.extend({
toolLinks: true,
defaultTool: 'marker',
defaultColor: '#000000',
defaultSize: 5
}, opts);
this.painting = false;
this.color = this.options.defaultColor;
this.size = this.options.defaultSize;
this.tool = this.options.defaultTool;
this.actions = [];
this.action = [];
this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
if (this.options.toolLinks) {
$('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
var $canvas, $this, key, sketch, _i, _len, _ref;
$this = $(this);
$canvas = $($this.attr('href'));
sketch = $canvas.data('sketch');
_ref = ['color', 'size', 'tool'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
if ($this.attr("data-" + key)) {
sketch.set(key, $(this).attr("data-" + key));
}
}
if ($(this).attr('data-download')) {
sketch.download($(this).attr('data-download'));
}
return false;
});
}
}
Sketch.prototype.download = function(format) {
var mime;
format || (format = "png");
if (format === "jpg") {
format = "jpeg";
}
mime = "image/" + format;
return window.open(this.el.toDataURL(mime));
};
Sketch.prototype.set = function(key, value) {
this[key] = value;
return this.canvas.trigger("sketch.change" + key, value);
};
Sketch.prototype.startPainting = function() {
this.painting = true;
return this.action = {
tool: this.tool,
color: this.color,
size: parseFloat(this.size),
events: []
};
};
Sketch.prototype.stopPainting = function() {
if (this.action) {
this.actions.push(this.action);
}
this.painting = false;
this.action = null;
return this.redraw();
};
Sketch.prototype.onEvent = function(e) {
if (e.originalEvent && e.originalEvent.targetTouches) {
if (e.originalEvent.targetTouches[0] !== undefined && e.originalEvent.targetTouches[0].pageX!==undefined){
e.pageX = e.originalEvent.targetTouches[0].pageX;
}
if (e.originalEvent.targetTouches[0] !== undefined &&e.originalEvent.targetTouches[0].pageY){
e.pageY = e.originalEvent.targetTouches[0].pageY;
}
}
$.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
e.preventDefault();
return false;
};
Sketch.prototype.redraw = function() {
var sketch;
//this.el.width = this.canvas.width();
this.context = this.el.getContext('2d');
sketch = this;
$.each(this.actions, function() {
if (this.tool) {
return $.sketch.tools[this.tool].draw.call(sketch, this);
}
});
if (this.painting && this.action) {
return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
}
};
return Sketch;
})();
$.sketch = {
tools: {}
};
$.sketch.tools.marker = {
onEvent: function(e) {
switch (e.type) {
case 'mousedown':
case 'touchstart':
this.startPainting();
break;
case 'mouseup':
case 'mouseout':
case 'mouseleave':
case 'touchend':
case 'touchcancel':
this.stopPainting();
}
if (this.painting) {
this.action.events.push({
x: e.pageX - this.canvas.offset().left,
y: e.pageY - this.canvas.offset().top,
event: e.type
});
return this.redraw();
}
},
draw: function(action) {
var event, previous, _i, _len, _ref;
this.context.lineJoin = "round";
this.context.lineCap = "round";
this.context.beginPath();
this.context.moveTo(action.events[0].x, action.events[0].y);
_ref = action.events;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
this.context.lineTo(event.x, event.y);
previous = event;
}
this.context.strokeStyle = action.color;
this.context.lineWidth = action.size;
return this.context.stroke();
}
};
//aqui é onde apaga o que foi desenhado
return $.sketch.tools.eraser = {
onEvent: function(e) {
return $.sketch.tools.marker.onEvent.call(this, e);
},
draw: function(action) {
var oldcomposite;
oldcomposite = this.context.globalCompositeOperation;
this.context.globalCompositeOperation = "copy";
action.color = "rgba(0,0,0,0)";
$.sketch.tools.marker.draw.call(this, action);
return this.context.globalCompositeOperation = oldcomposite;
}
};
})(jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script><divclass="col-xs-12" id="divdesenho"><br>
<br>
<div class="tools">
<a href='#desenho' data-color='#000' class="btn" style="background-color: #000"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#CC3300' class="btn" style="background-color: #CC3300"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#2C7227' class="btn" style="background-color: #2C7227"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#6633FF' class="btn" style="background-color: #6633FF"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#9900CC' class="btn" style="background-color: #9900CC"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-tool="marker" class="btn" style="background-color: #CCCCCC"><i class="icon-pencil-3" ></i></a>
<a href='#desenho' data-tool="eraser" class="btn" style="background-color: #CCCCCC"><i class="fa fa-eraser" ></i></a>
</div>
<br />
<canvas crossOrigin="anonymous" id="desenho" width="730" height="350" style="border: 1px solid #CCCCCC;"></canvas>
<input name="{$q23_name}" id="{$q23_id}" type="hidden">
</div>