Javascript 画布文本未位于其他画布内

文本和图像在主容器/画布中未对齐

HTML:

<canvas id="ex1" width="580" height="400" style="border:1px solid #ccc;">
            HTML Canvas not supported
        </canvas>   
        <canvas id="textC"></canvas>
        <canvas id="taskLogo"></canvas>

// 1. window.onload - wait for the page to be fully loaded.
        window.onload = function(){
            drawExamples();
            //drawEx1();
            drawLogo();
        }

        function drawExamples(){
            //2. obtain a reference to the canvas element
            var canvas = document.getElementById("ex1");
            var context = canvas.getContext("2d");

            var textCanvas = document.getElementById("textC");
            var textContext = textCanvas.getContext("2d");

            var textMetrics = context.measureText(textContext);
            var width = textMetrics.width;

            console.log(width)

            //4. Draw Graphics
            context.fillStyle = "#900"; // background 
            context.fillRect(14,25, 550, 350); // size - x y width height

            // stroke
            context.strokeStyle = "#000";
            context.lineWidth = 1;
            context.strokeRect(14,25, 550, 350); // size - x y width height

            //clear rectangle
            //context.clearRect(455,80,110,100);

            // canvas path starts
            context.beginPath();
                context.moveTo(100,10);
                context.lineTo(150,50);
                context.lineTo(200,50);
                context.lineTo(100,10);
                context.fill(); // stroke
            context.closePath();
            // canvas path ends

            textContext.font = "normal 90px Verdana";
            textContext.strokeStyle = "#f00";
            textContext.strokeText ("Developer", 15, 65);

            textContext.font    = "normal 15px Verdana";
            textContext.fillStyle= "#f00";
            textContext.fillText ("Developer", 20, 90)

        }

        // Image 
        var img1 = null;
        function drawLogo(){
            img1 = new Image();
            img1.src = "http://taskdesigns.com/task/images/logo.png";

            img1.addEventListener('load', drawImage1);
        }
        function drawImage1(){
            var imgCanvas = document.getElementById("taskLogo");
            var imgContext = imgCanvas.getContext("2d");

            imgContext.drawImage(img1, 20, 10)
        }

---

您可以使用1张画布，而不是3张画布。或者，您可以使用CSS定位将画布堆叠在彼此的顶部。-使用1canvas@ViliusL：谢谢buddy@ViliusL当前位置问题出在这里。当我们增加边框尺寸时，即使文本笔划也会增加，这应该是：（@Ashley在笔划文本之前只需重置线宽。