The Problem
So I've been developing a bar chart for my website using an array of samples between the values of 0 and 140. The graph itself looks fine running on my MacBook in Chrome (MacOS High Sierra 10.13.3 and Chrome 67.0.3396.87) - however, on my Windows 10 device, the graph looks incredibly blurry in Chrome (strangely enough it still works in IE, Edge and Firefox just as it does on my MacBook).
This is how it looks on my MacBook:
And this is how it looks on my PC (in Chrome):
My Code
var wave = {
samples: null,
draw: function(canvas, color){
/*
* @param {node} canvas - a canvas element
* @param {string} color - a hexadecimal, rgb or rgba value
*/
var x = 0,
ctx = canvas.getContext("2d"),
samples = this.samples;
// iterate through all the samples
for(var i = 0; i < samples.length; i++){
ctx.fillStyle = color;
// draw a 'bar' that is 2 pixels wide,
// and make each bar height relative to
// the canvas (60px) and sample heights
// ie: 140 would become 60px in height
ctx.fillRect(
x + (x * 2), // left
60 - (samples[i] * (60 / 140)), // top
2, // width
samples[i] * (60 / 40) // height
);
ctx.fill();
x++;
}
},
init: function(layer, samples){
/*
* @param {node} layer - a dom node (the bar chart canvas)
* @param {array} samples - an array of samples ranging from 0 to 140, eg: [0, 40, 45, 50, 140]
*/
this.samples = samples;
this.draw(layer, "#919191");
}
}
How it is implemented (example):
<canvas id="cvs" width="600" height="60"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("cvs"),
samples = [21, 46, 83, 72, 127]; // etc..
wave.init(canvas, samples);
</script>
I haven't come across a problem like this on the internet so far, and it has been bugging me for a while now. So anyone that could find me a solution, it would be much appreciated.
EDIT: I have noticed that if I set a set the transform property on the canvas to scale(0.91) it looks perfectly fine (.. other than being the wrong size haha)
