3

I am working on a web based mapping thing. I tried to display an SVG World Map, but it is only showing just over half of what I want it to.

You can see what I mean here:

Map half displaying

And I am using this code to display it:

var img = new Image();
img.src = "https://trevorc.ca/maps/map.svg";
mapcan.drawImage(img,-26361054,-16656750,26361054*2.2,16656750*2);

I have double checked the size. I am almost certain it is correct. I have even changed it to see. When I did that it stretched the image but was cut off at the same spot, and I am sure the file is not just cut off there.

Trevor Clarke
  • 1,482
  • 1
  • 11
  • 20
  • Please post a js fiddle! It's hard to help you without anything to look and work on! – Constantin Groß Mar 18 '16 at 22:44
  • 1
    @Connum I added a link... – Trevor Clarke Mar 18 '16 at 22:45
  • interestingly, while it's cut off in Chrome, it overlaps the grid to the right... – Constantin Groß Mar 18 '16 at 22:56
  • Its strange... I am attempting to cut the map into two files? Maybe? @Connum – Trevor Clarke Mar 18 '16 at 22:57
  • I have worked with SVG quite estensively, but my experience with canvas is a bit limited. I'm afraid I can't help you on this one – Constantin Groß Mar 18 '16 at 22:58
  • :-( aww well thanks anyway! – Trevor Clarke Mar 18 '16 at 22:58
  • Post the svg markup. You need absolute width and height attributes. Also, in the code in the question, you are not waiting for the image has loaded, call drawImage in the img's onload event handler. – Kaiido Mar 19 '16 at 01:50
  • The image is located at trevorc.ca/maps/map.svg – Trevor Clarke Mar 19 '16 at 01:52
  • I'm on a phone so I can't check the sources rn, the first line of the svg should be enough though (where width height and viewBox attributes are defined). Also, for code posterity it's always good to include every necessary info into the question itself, external resources may disappear. – Kaiido Mar 19 '16 at 01:53
  • @kaiido they are... i dont understand – Trevor Clarke Mar 19 '16 at 01:55
  • Well just post the first line of your svg (´ – Kaiido Mar 19 '16 at 01:58
  • Also, didn't noticed at first glance, but your values are way off canvas' limits : http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element so please provide a complete example with what you do with your canvas too (I hope there is some `ctx.scale` somewhere). – Kaiido Mar 19 '16 at 02:19
  • Why do the lines work then – Trevor Clarke Mar 19 '16 at 02:20
  • Multiple guesses : only this part of the svg has loaded when you call drawImage, your cropping are wrong, it draws only some part before you hit some max in the scaled ctx. Tried with calling a simple drawImage(img,0,0) on a non scaled canvas after the svg has loaded and everything is drawn. So you may also want to reset your canvas matrix before drawing. But without your code we can't help you. – Kaiido Mar 19 '16 at 03:16
  • Ok... maybe ill post later – Trevor Clarke Mar 19 '16 at 03:17

0 Answers0