Stretching the (HTML 5) Canvas: Fixing Aspect Ratio Problems

The Problem

I’m working in a web part that uses the HTML 5 <canvas> element, and I ran into a little problem. The web part is a “microsurvey” that asks a single question and, when the user clicks an answer, displays the results of the survey so far. For the results, I wanted to show a bar chart, and I thought it would be a fun opportunity to use the new HTML 5 canvas. The problem is that my chart was distorted; as you can see the text is too wide and looks like it came off an old dot matrix printer. Somebody stretched the canvas!

3-9-2015 6-28-46 PM

Continue Reading