Problem was solved. canvas.setAttribute width and height is necessary when creating new canvas element in javascript.
On 16 окт, 12:14, Klimashkin <[email protected]> wrote: > Hello, friends! > I have difficult question on developing application on basis of Google > Map. > I must draw my own polylines with specific style - dashed, for > example. > That's why I extending GOverlay interface to drawcanvaswith my > rules. There are simple code: > > function NeoLine(points, color, weight, opacity, tooltip){ > this.points_ = points; > this.color_ = color || "#888888"; > this.opacity_ = opacity; > this.weight_ = weight || 2; > this.tooltip_ = tooltip;} > > NeoLine.prototype = new GOverlay(); > > NeoLine.prototype.initialize = function(map) { > varcanvas= document.createElement("canvas"); > canvas.id = "canva2"; > canvas.style.border = "1px solid #f00"; > canvas.style.top = "0px"; > canvas.style.left = "0px"; > canvas.style.width = "400px"; > canvas.style.height = "400px"; > if (canvas.getContext){ > var context =canvas.getContext('2d'); > context.strokeStyle = '#f00'; > context.scale(1,1); > context.lineWidth = 1; > context.beginPath(); > context.moveTo(100, 10); // give the (x,y) coordinates > context.lineTo(100, 10); > context.lineTo(10, 100); > context.lineTo(10, 10); > context.stroke(); > context.closePath(); > context.save(); > context.restore(); > } > map.getPane(G_MAP_MAP_PANE).appendChild(canvas); > > this.map_ = map; > this.canvas_ =canvas; > > } > > NeoLine.prototype.remove = function() { > this.canvas_.parentNode.removeChild(this.canvas_); > > } > > NeoLine.prototype.copy = function() { > return new NeoLine(this.points_, this.color_, this.weight_, > this.opacity_, this.tooltip_); > > } > > NeoLine.prototype.redraw = function(force) { > if (!force) return; > this.canvas_.style.width = "400px"; > this.canvas_.style.height = "400px"; > > } > > Then, I add the anothercanvaswith same style simple on the same page > (not in map div - before it) like this: > > <canvasid="canva" width="400px" height="400px" style="position:fixed; > left:1px; top:0px; z-index:9000; border: 1px solid black; > cursor:pointer;"> > <img src="no_canvas_sorry.jpg" /> > </canvas> > <script> > varcanvas= document.getElementById('canva'); > if (canvas.getContext &&canvas.style.cursor=='pointer'){ > var context =canvas.getContext('2d'); > context.strokeStyle = '#670'; > context.scale(1,1); > context.lineWidth = 1; > context.beginPath(); > context.moveTo(100, 10); // give the (x,y) coordinates > context.lineTo(100, 10); > context.lineTo(10, 100); > context.lineTo(10, 10); > context.stroke(); > context.closePath(); > context.save(); > context.restore(); > > } > > The result you can see on this > image:http://s49.radikal.ru/i124/0910/11/516c3e73e6dc.jpg > > Why,canvascontext in google map seems so stretched? > I can't find any hint on this problem. Please, can you help me? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/google-maps-api?hl=en -~----------~----~----~----~------~----~------~--~---
