Canvas Kreis mit abgeschnittenem Bild als Hintergrund

[NetBull]

Hi,

ich lerne nun noch mal ein wenig CANVAS und möchte einen Kreis erstellen dessen Hintergrund ein Bild ist. Aber das Bild soll an den Kanten des Kreises abgeschnitten sein. Folgendes Script baut mir beides, aber das Abschneiden gelingt mir einfach nicht.

function draw3() {
        var drawingCanvas = document.getElementById('canvas');
        if(drawingCanvas.getContext) {
            var context = drawingCanvas.getContext('2d');
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 70;

            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.fillStyle = 'green';
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = '#003300';
            context.stroke();
            var myImage = new Image();
            myImage.onload = function() {
                context.drawImage(myImage, 55, 55, 130, 130);
            }
            myImage.src = "http://lorempixel.com/800/400/sports/";
        }
    }

Kann mir hier mal jemand einen Schubser geben. Sicherlich suche ich nur falsche bei Google.

LG NetBu||

 

[Sempervivum]

Hast Du meine Antwort hier gelesen?
https://www.tutorials.de/threads/canvas-text-in-rectangle-zentrieren-und-wrappen.402808/

Möglicher Weise kann dir jCanvas auch bei dem Problem hier helfen. Es gibt dort Layer und die Möglichkeit zu maskieren. Vielleicht kannst Du dein Problem damit lösen.

Wenn nicht, würde ich folgender Maßen vorgehen:
Ein zweites Canvas anlegen in der Größe des Bildes und dort einen schwarzen Kreis zeichnen.
Das Bild auf ein drittes Canvas legen.
Mit getImageData die Daten von diesen beiden Canvas-Elementen erzeugen.
Informiere dich, wie Du auf die rgb-Werte von imageData zugreifen kannst. Dann alle Pixel des Bildes abarbeiten und auf transparent setzen, wenn der rgb-Wert auf der Referenz mit dem Kreis nicht schwarz ist.

Ich schrieb ja schon, dass meine Kenntnisse mit Canvas begrenzt sind; möglicher Weise geht es auch einfacher.

 

[Sempervivum]

PS: Weil es mich interessiert, habe ich es mal ausprobiert und festgestellt, dass es mit der Maskierung von jCanvas ganz einfach ist:
https://jsfiddle.net/Sempervivum/b822do0g/

 

[NetBull]

Hi,

das ist cool. Ja ich hab die Antwort im anderen Thread gelesen. Wir sind im Umzug und ich komm kaum noch nach mich weiter zu entwickeln.. Aber hab nun erst mal zwei Wochen Urlaub und finde hoffentlich mehr Zeit.

Das Beispiel von Dir ist gelungen, überzeugt mich und ich schau mir jCanvas noch mal genauer ansehen.

LG NetBu||