html5practice/round Rect

• roundRect function 는 이용 하였음.
  

function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
    if (typeof stroke == "undefined" ) {
        stroke = true;
    }
    if (typeof radius === "undefined") {
        radius = 5;
    }
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    if (stroke) {
        ctx.stroke();
    }
    if (fill) {
        ctx.fill();
    }        
}

function nodeDraw(ctx, text, pos){
    console.log("text : " + text + " pos : " + pos.x + ", " + pos.y);
    calcRt = ctx.measureText(text);
    oldFill = ctx.fillStyle;
    console.log(calcRt.width);
    roundRect(ctx, pos.x-2, pos.y-2, calcRt.width + 6, 15 + 6, 5, true, true);
    ctx.fillStyle = "black";
    ctx.fillText(text, pos.x, pos.y);
    ctx.fillStyle = oldFill;
}

function main(){
    var canvas = document.getElementById('canvas');
    if (canvas.getContext){  
        var ctx = canvas.getContext('2d');
        ctx.font = "15px sans-serif";
        ctx.textBaseline = "top";
        ctx.fillStyle = "yellow";
        var pt = {x:100, y:40};
        nodeDraw(ctx, "hello canvas", pt);
    }
}