Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: e46d835e8e757a910dadc70f4f6e6b581fac2af4 authored by James Graham on 16 October 2013, 16:59:22 UTC
Add rewriten path for web idl parser
Tip revision: e46d835
canvas_linestyles_linecap_001.htm 
<!doctype HTML> 
<html>
    <head>
        <title>HTML5 Canvas Test: "square" lineCap</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-linecap" />
        <meta name="assert" content="The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line." />
        <script type="text/javascript">
            function runTest() 
            {
                var canvas = document.getElementById("canvas1");
                var ctx = canvas.getContext("2d");

                // Draw the first red rectangle.
                ctx.fillStyle ="rgba(255, 0, 0, 1.0)";
                ctx.fillRect(75, 0, 25, 50);

                // Draw second red rectangle.
                ctx.fillRect(0, 0, 25, 50);

                // Draw a line with square lineCap.
                ctx.strokeStyle = "rgba(0, 0, 0, 1.0)";
                ctx.lineWidth = 50;
                ctx.lineCap = "square";
                ctx.beginPath();
                ctx.moveTo(25, 25);
                ctx.lineTo(75, 25);
                ctx.stroke();
            }
        </script>
    </head>
    <body onload="runTest()">
        <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p>
        <p>Test passes if there is no red visible on the page and a black rectangle is seen on the page.</p>
        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
    </body>
</html>
back to top