How to resize a drawing html 5 canvas on a custom Polymer element?

Question

I would like to resize a html5 canvas on a custom Polymer element when window resize event is fire !

I try to use window.onresize event but I couldn't get canvas functions.

We could draw things on this html5 canvas with mouse and touch event listening! We use polymer and polymer-gestures.

 canvas { background:url(BackgroundPattern.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { canvas { background:url(BackgroundPattern@2x.png); } } 

 <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../polymer-gestures/polymer-gestures.html"> <polymer-element name="mycustom-canvas"> <template> <link rel="stylesheet" href="./mycustom-canvas.css"> <canvas id="canvas" touch-action="none"></canvas> </template> <script> Polymer({ init: function (){ var canvas = this.$.canvas, context = canvas.getContext('2d'), windowWidth = window.innerWidth, windowHeight = window.innerHeight, scale = this.getPixelRatio(); canvas.width = windowWidth - canvas.offsetLeft; canvas.height = windowHeight - canvas.offsetTop; if (scale > 1) { var newWidth = canvas.width * scale, newHeight = canvas.height * scale; canvas.style.width = canvas.width + 'px'; canvas.style.height = canvas.height + 'px'; canvas.width = newWidth; canvas.height = newHeight; context = canvas.getContext('2d'); } context.lineWidth = 2 * scale; context.lineCap = 'round'; context.lineJoin = 'round'; context.strokeStyle = 'rgb(0, 0, 0)'; }, getCoords: function (inEvent) { var scale = this.getPixelRatio(); if (inEvent.offsetX) { return { x: scale * inEvent.offsetX, y: scale * inEvent.offsetY }; } else if (inEvent.layerX) { return { x: scale * inEvent.layerX, y: scale * inEvent.layerY }; } else { return { x: scale * (inEvent.pageX - inEvent.target.offsetLeft), y: scale * (inEvent.pageY - inEvent.target.offsetTop) }; } }, getPixelRatio: function () { if ('devicePixelRatio' in window) { if (window.devicePixelRatio > 1) { return window.devicePixelRatio; } } return 1; }, ready: function () { var events = [ // base events 'down', 'up', 'trackstart', 'track', 'trackend', 'tap', 'hold', 'holdpulse', 'release' ]; this.init(); events.forEach(function(en) { PolymerGestures.addEventListener(this, en, function (inEvent) { var coords = this.getCoords(inEvent); switch (en) { case 'down': this.fire('mycustom-canvas-down', {event: inEvent, x : coords.x, y : coords.y}); break; case 'track': this.fire('mycustom-canvas-track', {event: inEvent, x : coords.x, y : coords.y}); break; case 'up': this.fire('mycustom-canvas-up', {event: inEvent, x : coords.x, y : coords.y}); break; } inEvent.preventDefault(); }); }, this); } }); </script> </polymer-element> 

Now I use window.height and window.width for canvas initial size but my final purpose, it's to use parent container dimensions.

Answer 1

I finally succeeded that I would like to do. I use Polymer/core-resizable.

This is what I've done :

 <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../polymer-gestures/polymer-gestures.html"> <link rel="import" href="../core-resizable/core-resizable.html"> <polymer-element name="mycustom-canvas"> <template> <link rel="stylesheet" href="./mycustom-canvas.css"> <!--<div center horizontal layout>--> <!--<content>--> <canvas id="canvas" touch-action="none"></canvas> <!--</content>--> <!--</div>--> </template> <script> Polymer(Polymer.mixin({ eventDelegates: { 'core-resize': 'resizeHandler' }, init: function (){ var canvas = this.$.canvas, context = canvas.getContext('2d'), windowWidth = this.parentNode.clientWidth, windowHeight = window.innerHeight, scale = this.getPixelRatio(); canvas.width = windowWidth - canvas.offsetLeft; canvas.height = windowHeight - canvas.offsetTop; if (scale > 1) { var newWidth = canvas.width * scale, newHeight = canvas.height * scale; canvas.style.width = canvas.width + 'px'; canvas.style.height = canvas.height + 'px'; canvas.width = newWidth; canvas.height = newHeight; context = canvas.getContext('2d'); } context.lineWidth = 2 * scale; context.lineCap = 'round'; context.lineJoin = 'round'; context.strokeStyle = 'rgb(0, 0, 0)'; }, getCoords: function (inEvent) { var scale = this.getPixelRatio(); if (inEvent.offsetX) { return { x: scale * inEvent.offsetX, y: scale * inEvent.offsetY }; } else if (inEvent.layerX) { return { x: scale * inEvent.layerX, y: scale * inEvent.layerY }; } else { return { x: scale * (inEvent.pageX - inEvent.target.offsetLeft), y: scale * (inEvent.pageY - inEvent.target.offsetTop) }; } }, getPixelRatio: function () { if ('devicePixelRatio' in window) { if (window.devicePixelRatio > 1) { return window.devicePixelRatio; } } return 1; }, ready: function () { var events = [ // base events 'down', 'up', 'trackstart', 'track', 'trackend', 'tap', 'hold', 'holdpulse', 'release' ]; this.init(); events.forEach(function(en) { PolymerGestures.addEventListener(this, en, function (inEvent) { var coords = this.getCoords(inEvent); switch (en) { case 'down': this.fire('mycustom-canvas-down', {event: inEvent, x : coords.x, y : coords.y}); break; case 'track': this.fire('mycustom-canvas-track', {event: inEvent, x : coords.x, y : coords.y}); break; case 'up': this.fire('mycustom-canvas-up', {event: inEvent, x : coords.x, y : coords.y}); break; } inEvent.preventDefault(); }); }, this); }, domReady: function() { this.async('resizeHandler'); }, attached: function() { this.resizableAttachedHandler(); }, detached: function() { this.resizableDetachedHandler(); }, resizeHandler: function() { this.init(); this.logCanvasSize(); }, logCanvasSize: function(){ console.log('Canvas width : ' + this.$.canvas.width + ' - Canvas height : ' + this.$.canvas.height ); } }, Polymer.CoreResizable)); </script> </polymer-element>