Canvas Resize

[ghost]

Thanks so much for this angular version. Any idea on how to get this portion to work?

var wrapper = document.getElementById("signature-pad"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crips on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
signaturePad = new SignaturePad(canvas);

[mduqueoviedo]

I do this, it's not beatiful but it works for me:

canvasWidth = if canvas.offsetWidth != 0 then canvas.offsetWidth else $('.canvas-container').width() # I use the width of the div which contains the canvas
canvasHeight = if canvas.offsetHeight != 0 then canvas.offsetHeight else 116 # I hardcode this because my signature must always have the same height.

canvas.width = canvasWidth * ratio
canvas.height = canvasHeight * ratio

[cwcrawley]

Any chance you could update your main repo with how to make the canvas responsive?

The comment above makes no sense to me. I'm reluctant to do Javascript when a pure AngularJS solution should work.

No matter what size I set the CSS of the Canvas, it always stretches it without redrawing the available area.

[mduqueoviedo]

Don't forget that when defining the size of a canvas element, there are two sizes, html and css. You have to define the html size of the canvas.

By the way, I improved my solution. It has some js, btw, maybe you don't like it... The key is knowing the size of the canvas container element. Whenever the window is resized, I call the code below, so the canvas recalculates and resizes accordingly and the content is loaded again.

ratio = window.devicePixelRatio || 1
canvasWidth = if canvas.offsetWidth != 0 then canvas.offsetWidth else $('.canvas-container').width()

aspectRatio = 2.5 # Just because I want this ratio
canvasHeight = canvas.offsetWidth / aspectRatio
$('.canvas-container').css('height', "#{$('.canvas-container').width() / aspectRatio}px")

canvas.width = canvasWidth * ratio
canvas.height = canvas.width / aspectRatio

canvas.getContext("2d").scale(ratio, ratio)
# Some code to load the content of the canvas again