I would like to draw a road network with coordinates on a HTML5 canvas.
Therefore, I tried to create a transformation matrix before the drawing which should convert longitude and latitude values to pixels inside the canvas. At the beginning, I calculated the center coordinates of my map and moved them to the center of my canvas with translate. Then I calculated the according scale factor so that the map fits within my canvas. Unfortunately, the map does not appear within my canvas. Am I doing something wrong or how could I solve this problem?
mapBounds.mapWidth = mapBounds.maxX - mapBounds.minX
mapBounds.mapHeight = mapBounds.maxY - mapBounds.minY
mapBounds.centerX = (mapBounds.maxX + mapBounds.minX) / 2;
mapBounds.centerY = (mapBounds.maxY + mapBounds.minY) / 2;
let scale = Math.min(context.canvas.width / mapBounds.mapWidth, context.canvas.height / mapBounds.mapHeight)
context.scale(scale,scale)