Search code examples
canvaswkwebview

WKWebView: how to display a big HTML5 canvas?

Viewport is 1180x820 on iPad, even if screen resolution is 2360x1640.

If I set up a canvas of 2360x1640, only a quarter is displayed on my WKWebView. And I must have a 2360x1640 canvas.

So I'm not able to display it in my WKWebView on my iPad.

Could you please help me?

Regards, Alex

Solution

  • I think you should be able to use devicePixelRatio to scale your canvas.

    var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

canvas.width = 2360 * window.devicePixelRatio
canvas.height = 1640 * window.devicePixelRatio
canvas.style.width = '2360px'
canvas.style.height = '1640px'

ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
ctx.fillRect(0, 0, 100, 100)
ctx.fillRect(2360, 0, 100, 100)
ctx.fillRect(0, 1640, 100, 100)
ctx.fillRect(2360, 1640, 100, 100)

    I don't have access to an iPad, but see if this works.