CODEWITHSUNDEEP
javascriptcanvas
Sebastian Zeki
Sebastian Zeki

Reputation: 6874

Convert squares to circles in canvas html

OK so I appreciate that this is a massively basic question but I'm totally new to canvas and I just need to do something simple. Basically I am using springy.js to draw force directed graphs. The nodes on the graph are squares and I just want them to be circles. Can someone show me what I should change in the code below and I can figure out the rest from there

I tried 

ctx.arc(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight,2*Math.PI);
ctx.stroke();

instead of the line with clearRect but the boxes remain and the connections between boxes stop being straight lines.

function drawNode(node, p) {
    var s = toScreen(p);

    ctx.save();


    // Pulled out the padding aspect sso that the size functions could be used in multiple places
    // These should probably be settable by the user (and scoped higher) but this suffices for now
    var paddingX = 6;
    var paddingY = 6;

    var contentWidth = node.getWidth();
    var contentHeight = node.getHeight();
    var boxWidth = contentWidth + paddingX;
    var boxHeight = contentHeight + paddingY;

    // clear background
    ctx.clearRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);
    // fill background
    if (selected !== null && selected.node !== null && selected.node.id === node.id) {
        ctx.fillStyle = "#FFFFE0"; //when clicked
    } else if (nearest !== null && nearest.node !== null && nearest.node.id === node.id) {
        ctx.fillStyle = "#EEEEEE";//when hovered over
    } else {
        //if the node.FBScore >10 then ctx.fillStyle = "#F00909";
        ctx.fillStyle = "#E34747";//normal colour
    }
    ctx.fillRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);

    if (node.data.image == undefined) {
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
        ctx.fillStyle = (node.data.color !== undefined) ? node.data.color : "#000000";
        var text = (node.data.label !== undefined) ? node.data.label : node.id;
        ctx.fillText(text, s.x - contentWidth/2, s.y - contentHeight/2);
    } else {
        // Currently we just ignore any labels if the image object is set. One might want to extend this logic to allow for both, or other composite nodes.
        var src = node.data.image.src;  // There should probably be a sanity check here too, but un-src-ed images aren't exaclty a disaster.
        if (src in nodeImages) {
            if (nodeImages[src].loaded) {
                // Our image is loaded, so it's safe to draw
                ctx.drawImage(nodeImages[src].object, s.x - contentWidth/2, s.y - contentHeight/2, contentWidth, contentHeight);
            }
        }else{
            // First time seeing an image with this src address, so add it to our set of image objects
            // Note: we index images by their src to avoid making too many duplicates
            nodeImages[src] = {};
            var img = new Image();
            nodeImages[src].object = img;
            img.addEventListener("load", function () {
                // HTMLImageElement objects are very finicky about being used before they are loaded, so we set a flag when it is done
                nodeImages[src].loaded = true;
            });
            img.src = src;
        }
    }
    ctx.restore();
}

Upvotes: 0

Views: 244

Answers (2)

Kaiido
Kaiido

Reputation: 136678

Instead of replacing the clearRect() method, you should replace the fillRect() with the arc(x, y, radius, startAngle, endAngle, anticlockwise); one : 

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

function drawNode() {
    var s = {
        x: (Math.random() * 200) + 50,
        y: (Math.random() * 200) + 50
    };

    var paddingX = 6;
    var paddingY = 6;

    var contentWidth = s.x / 5;
    var contentHeight = s.y / 5;
    var boxWidth = contentWidth + paddingX;
    var boxHeight = contentHeight + paddingY;
    ctx.fillStyle = '#AAFFAA';
    // I modified it so the whole canvas will be cleared
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // We start a new path
    ctx.beginPath();
    // then we draw our circle, setting its radius to the max between contentWidth and contentHeight
    ctx.arc(s.x, s.y , Math.max(boxWidth,boxHeight)/2, 0, 2 * Math.PI);
    // and finally we fill it
    ctx.fill();
}
document.addEventListener('click', drawNode);
drawNode();
canvas{cursor:pointer};
<canvas height="300" width="300" />

Upvotes: 1

Canvas
Canvas

Reputation: 5897

I have create a simple jsFiddle to show how to draw a curved corner rectangle

-- Updated so you can now simply change the roundedValue which will then change the smoothness of the corners.

http://jsfiddle.net/gHCJt/1127/

// Get canvas
var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");

// Draw simple rect
var rectX = 125;
var rectY = 125;
var rectWidth = 150;
var rectHeight = 150;
var roundedValue = 75;

// Apply corner
context.lineJoin = "round";
context.lineWidth = roundedValue;

// Apply the corner to the draw method for strokeRect and fillRect
context.strokeRect(rectX+(roundedValue/2), rectY+(roundedValue/2), rectWidth-roundedValue, rectHeight-roundedValue);
context.fillRect(rectX+(roundedValue/2), rectY+(roundedValue/2), rectWidth-roundedValue, rectHeight-roundedValue);

Upvotes: 0

Related Questions