Two Black Lines

gEdab.markdown

Two Black Lines

A Pen by Tankred on CodePen.

License.

index.html

<canvas id="PietMondriaan" width="640" height="507"></canvas>
<!--
HTML5 painting based on:
Artist: Piet Mondrian
Two Black Lines, 1931. 31 ½ x 31/ ½ in. Stedelijk Museum, Amsterdam
-->

script.js

var canvas = document.getElementById('PietMondriaan');
var ctx=canvas.getContext("2d");
    var startX=150;
    var startY=110;
  drawRotatedRect(startX-2,startY-2,305,305,45,'#E9E7B6');
  drawRotatedRect(startX,startY,300,300,45,'#F7F1E5');
ctx.clip();
 ctx.beginPath();
 ctx.rect(52, 346, 436, 12);
 ctx.fillStyle = '#010101';
 ctx.fill();
 ctx.lineWidth = 1;
 ctx.strokeStyle = '#43443E';
 ctx.stroke();
ctx.beginPath();
ctx.rect(206,52,11,436);
ctx.fillStyle='#010300';
ctx.fill();

  function drawRotatedRect(x,y,width,height,degrees,color){
        ctx.save();
        ctx.beginPath();
        // move the rotation point to the center of the rect and rotate
        ctx.translate( x+width/2, y+height/2 );
        ctx.rotate(degrees*Math.PI/180);
        ctx.rect( -width/2, -height/2, width,height);
 ctx.fillStyle = color;
     ctx.fill();
        ctx.restore();
    }

style.css

body, #PietMondriaan{background:#EEEFEA;}