CODEWITHSUNDEEP
javascriptimagecanvasresponsive
Mosset Jérémie
Mosset Jérémie

Reputation: 310

Draw on responsively resized canvas while keeping image size

I currently have a system that take display an image and allows drawing on it using https://github.com/yiom/sketchpad . This plugin (and some others, possibly all) won't draw where I click when the image is resized using css (with max-width/height), the drawing is done on another part of the image. I think the plugin calculate pointer position on the canvas not relative to it's height/width attribute compared to it's displayed height/width.

I did resolve this issue by creating a buffer canvas that will be displayed. Then I take it's pixel height/width and apply it to a new canvas attributes.

This makes the image being resized, which I don't want.

Any idea about how I can resolve this issue? Possibly by using another (free/cheap) plugin.

Upvotes: 0

Views: 224

Answers (1)

talkhabi
talkhabi

Reputation: 2759

When your canvas width and height are different with style properties :

<canvas style="width:800px;height:800px" height="400" width="400" class="sketchpad" id="sketchpad"></canvas>

in the sketchpad.js find this :

Sketchpad.prototype._cursorPosition = function(event) {
    return {
        x: event.pageX - $(this.canvas).offset().left,
        y: event.pageY - $(this.canvas).offset().top,
    };
};

change it to :

Sketchpad.prototype._cursorPosition = function(event) {

    var wd = $(this.canvas).width()*1  / $(this.canvas).attr('width')*1;
    var hd = $(this.canvas).height()*1 / $(this.canvas).attr('height')*1;

    return {
        x: (event.pageX - $(this.canvas).offset().left) / wd ,
        y: (event.pageY - $(this.canvas).offset().top) / hd ,
    };
};

Upvotes: 1

Related Questions