0

In order to provide full quality in a canvas I wanted to use the actual amount of pixel the canvas will be using on the screen. The content of the webpage I am coding for is fixed to 465px. But you can Imagine, a canvas with 465px is not very nice. And since modern monitors have way more pixel, I thought I could use this to my advantage. I tried different things like innderWidth, clientWidth and normal width but nothing worked. I really need a function that changes when I reload the browser with a different zoom.

HTML:

<div id="myTargetDiv"></div>

Javascript:

<script>
    $("#myTargetDiv").html("<canvas id='myCanvas' style='widt: 100%" width="
        + document.getElementById("contentMain").clientWidth + "' height='"
        + document.getElementById("contentMain").clientheight
        + "'>Your Browser does not support the HTML5 canvas tag</canvas>");
</script>

I'd be glad if you could provide a solution in JS or in Jquery

Joel
  • 17
  • 1
  • 5
  • Possible duplicate of [Total width of element](http://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery) and [a multitude of similar answers](http://stackoverflow.com/search?q=jquery+width+of+element) found by just searching SO. – Rob Nov 10 '16 at 15:06
  • @Rob 1) The answer provided in this comment does not even work. 2) Even if it worked it would return the width defined in the css. I really need the **onscreen** width – Joel Nov 10 '16 at 15:15
  • Not much you can do if you want it to work with different zoom levels. There is not standard way to determine the zoom setting. Though for Firefox and chrome I use window.devicePixelRatio as it changes to reflect the zoom setting. ie zoom 110% .devicePixelRatio = 1.100 Then just multiply innerWidth and innerHeight by that value. But I do not know what other or older browsers will do. – Blindman67 Nov 10 '16 at 15:28
  • There are a multitude of answers found by searching SO or clicking on the link where I did that for you. Did you do that? – Rob Nov 10 '16 at 17:14
  • @Blindman67 devicePixelRatio returns the zoom. But there is a difference between the zoom you set in your browser and the additional zoom which is needed to compensate for all the websites that are designed to look good on a screen with a resolution of like 300x400px or sth. – Joel Nov 11 '16 at 09:16
  • @Joel ???? you are just after a 1 to 1 pixel match for the canvas. Any additional zoom can be found in the page or CSS settings. – Blindman67 Nov 11 '16 at 09:38

1 Answers1

0

Set the width and height of your element to 100%. But make sure that all the parent elements are also 100% width/height.

html, body, #myTargetDiv {
  width: 100%;
  height: 100%;
}
Stan
  • 25,744
  • 53
  • 164
  • 242
  • That does not really help me. I need this information in order to calculate how many pixel my canvas will have. If i define the canvas with 465px and then add a picture with 1500px it will be scaled down and looks really, really badly – Joel Nov 10 '16 at 15:10
  • @Joel `console.log(document.getElementById('myTargetDiv').offsetWidth + 'x' + document.getElementById('myTargetDiv').offsetHeight)` – Stan Nov 10 '16 at 15:13