Created
August 11, 2019 03:54
-
-
Save jwgeller/103df508507ed549fc1f45145d8bb4a7 to your computer and use it in GitHub Desktop.
_MW Branding Exercise
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="myCanvas" width="500" height="500"></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.getElementById("myCanvas"); | |
| var ctx = canvas.getContext("2d"); | |
| ctx.fillStyle = "#000000"; | |
| ctx.fillRect(0, 0, 500, 500); | |
| ctx.strokeStyle = "#FFFFFF"; | |
| // example 1 | |
| // m | |
| ctx.moveTo(10, 10); | |
| ctx.lineTo(10, 90); | |
| ctx.stroke(); | |
| ctx.moveTo(10, 10); | |
| ctx.lineTo(30, 70); | |
| ctx.stroke(); | |
| ctx.moveTo(30, 70); | |
| ctx.lineTo(50, 10); | |
| ctx.stroke(); | |
| // separator | |
| ctx.moveTo(50, 10); | |
| ctx.lineTo(50, 90); | |
| ctx.stroke(); | |
| // w | |
| ctx.moveTo(50, 90); | |
| ctx.lineTo(70, 30); | |
| ctx.stroke(); | |
| ctx.moveTo(70, 30); | |
| ctx.lineTo(90, 90); | |
| ctx.stroke(); | |
| ctx.moveTo(90, 90); | |
| ctx.lineTo(90, 10); | |
| ctx.stroke(); | |
| // example 2 | |
| // m | |
| ctx.moveTo(15, 110); | |
| ctx.lineTo(10, 190); | |
| ctx.stroke(); | |
| ctx.moveTo(15, 110); | |
| ctx.lineTo(35, 170); | |
| ctx.stroke(); | |
| ctx.moveTo(35, 170); | |
| ctx.lineTo(55, 110); | |
| ctx.stroke(); | |
| // separator | |
| ctx.moveTo(55, 110); | |
| ctx.lineTo(60, 190); | |
| ctx.stroke(); | |
| // w | |
| ctx.moveTo(60, 190); | |
| ctx.lineTo(80, 130); | |
| ctx.stroke(); | |
| ctx.moveTo(80, 130); | |
| ctx.lineTo(100, 190); | |
| ctx.stroke(); | |
| ctx.moveTo(100, 190); | |
| ctx.lineTo(105, 110); | |
| ctx.stroke(); | |
| // example 3 | |
| // m | |
| ctx.moveTo(10, 210); | |
| ctx.lineTo(10, 290); | |
| ctx.stroke(); | |
| ctx.moveTo(10, 210); | |
| ctx.lineTo(30, 270); | |
| ctx.stroke(); | |
| ctx.moveTo(30, 270); | |
| ctx.lineTo(50, 210); | |
| ctx.stroke(); | |
| // separator | |
| ctx.beginPath(); | |
| ctx.lineWidth = 3; | |
| ctx.moveTo(50, 210); | |
| ctx.lineTo(50, 290); | |
| ctx.stroke(); | |
| ctx.closePath(); | |
| // w | |
| ctx.lineWidth = 1; | |
| ctx.moveTo(50, 290); | |
| ctx.lineTo(70, 230); | |
| ctx.stroke(); | |
| ctx.moveTo(70, 230); | |
| ctx.lineTo(90, 290); | |
| ctx.stroke(); | |
| ctx.moveTo(90, 290); | |
| ctx.lineTo(90, 210); | |
| ctx.stroke(); | |
| // rectangle to show preference | |
| ctx.rect(5, 200, 90, 95); | |
| // example 4 | |
| // m | |
| ctx.moveTo(10, 310); | |
| ctx.lineTo(10, 390); | |
| ctx.stroke(); | |
| ctx.moveTo(10, 310); | |
| ctx.lineTo(30, 370); | |
| ctx.stroke(); | |
| ctx.moveTo(30, 370); | |
| ctx.lineTo(50, 310); | |
| ctx.stroke(); | |
| // separator | |
| ctx.beginPath(); | |
| ctx.lineWidth = 2.5; | |
| ctx.moveTo(50, 310); | |
| ctx.lineTo(50, 390); | |
| ctx.stroke(); | |
| // w | |
| ctx.moveTo(50, 390); | |
| ctx.lineTo(70, 330); | |
| ctx.stroke(); | |
| ctx.moveTo(70, 330); | |
| ctx.lineTo(90, 390); | |
| ctx.stroke(); | |
| ctx.moveTo(90, 390); | |
| ctx.lineTo(90, 310); | |
| ctx.stroke(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment