[Nasenmann]

Hallo,

ich male mit Javascript in einem HTML 5 Canvas Element rum, in etwa so:

img = new Image();
img.src = "bild1.jpg";

var ctx = canvas.getContext('2d');
var ptrn = ctx.createPattern(img ,'repeat');

ctx.lineWidth = 5;
ctx.strokeStyle = ptrn;
    
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p2.x,p2.y);
ctx.moveTo(p1.x,p1.y);
ctx.closePath();
ctx.stroke();

Das funktioniert auch ohne Probleme, aber wenn ich mehrere Linien nacheinander zeichne, dann ist es so, als ob ich einfach nur das Hintergrund-Bild "freikratze", weil es über das ganze Canvas den gleichen Offset hat.

Ich möchte also für mehrere Linien einen unterschiedlichen Hintergrundgrafik-Offset angeben können, mit dem die Stroke-Style Pattern Grafik verschoben oder rotiert wird.

Kann mir da jemand weiterhelfen? Welche Eigenschaften des Image() Objekts sind dafür zuständig?

Danke für eure Hilfe!

[Nasenmann]

Hmm, keine HTML 5 Canvas Experten da, oder hab ich mich unklar ausgedrückt?