title: Processing scale() shape() and shapeMode() don't fit image to screen corners. Alternative?
body: <p>I'm quite new to processing, but I wanted to make a web page with an interactive map and this seemed like the only/easier way to do it.</p>
  
  <p>I learned a bit and it's really cool, but there seems to be some problem with the scale() and shape() function when drawing images (at least SVG images).</p>
  
  <p>I tried the following code, either by commenting the <code>worldMap.scale(xScale, yScale);</code> line on or off. In fact I tried many more stuff, but it's just impossible to get the map correctly. Even if you get the scale correctly, part of Alaska doesn't show up.</p>
  
  <pre><code>PShape worldMap;
  float xScale;
  float yScale;
  
  void setup() {
    size(900, 500);
    worldMap = loadShape("https://upload.wikimedia.org/wikipedia/commons/e/e8/BlankMap-World6-Equirectangular.svg");
    xScale = width / worldMap.width;
    yScale = height / worldMap.height;
    //worldMap.scale(xScale, yScale);
    smooth(); // Improves the drawing quality of the SVG
    noLoop();
  }
  
  void draw() {
    background(255);
    translate(0, 0);
    // Draw the full map
    shapeMode(CORNERS);
    shape(worldMap, 0, 0, 900, 500);
    //saveFrame("map output.png");
  }
  </code></pre>
  
  <p>Any idea what I'm doing wrong? I've lost hours with this "small" problem.
  From some posts I read in SO searching for a solution, it seems to indicate there is some problem with the scale() function in Processing, but I couldn't manage to get the answer to my problem from them.</p>