strayblues

Hagar is a front-end developer and blogger. After nearly a decade in the publishing industry, she transitioned into software development, and today part of her mission is to help other women who are on this path. She blogs about the tech industry and career switching, and co-admins a Facebook group for women who are taking their first steps into the industry. You can read her musings on her Hebrew blog, Anonymous Function, on Medium, and on TheMarker, where she writes a periodic technology column.

Hagar has always been a person who has many different interests and creative pursuits. Her inrerests and hobbies include linguistics, sewing, baking, painting and music.

strayblues

The Art of Mathematics: A Mandala Maker Tutorial

By Hagar Shilo

In frontend development there’s often a great focus on tools that aim at making our work more efficient. But what if you're new to web development? When you’re just starting out, the amount of new material can be overwhelming, particularly if you don’t have a solid background in Computer Science. But the truth is, once you’ve learned a little bit of JavaScript, you can already make pretty impressive things.

A couple of years back, when I was learning to code, I started working on a side project. I wanted to make something colorful and fun to share with my friends. This is what my app looks like these days:

strayblues

function init() {
    //...code...
    canvas.onpointermove = handleMouseMove;
    canvas.onpointerdown = handleMouseDown;
    canvas.onpointerup = stopDrawing;
    canvas.onpointerout = stopDrawing;
    document.querySelector(".clear").onclick = clearCanvas;
}

strayblues

var canvas, context, 
    prevX = 0, currX = 0, prevY = 0, currY = 0,
    draw = false;

strayblues

function handleMouseDown(e) {
    recordMouseLocation(e);
    draw = true;
}

strayblues

function handleMouseMove(e) {
    if (draw) {
        recordMouseLocation(e);
        drawLine();
    }
}

strayblues

function recordMouseLocation(e) {
    prevX = currX;
    prevY = currY;
    currX = e.clientX - canvas.offsetLeft;
    currY = e.clientY - canvas.offsetTop;
}

strayblues

function stopDrawing() {
    draw = false;
}

strayblues

function init() {
    canvas = document.querySelector("canvas");
    context = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.onpointermove = handlePointerMove;
    canvas.onpointerdown = handlePointerDown;
    canvas.onpointerup = stopDrawing;
    canvas.onpointerout = stopDrawing;

strayblues

function clearCanvas() {
    if (confirm("Want to clear?")) {
        context.clearRect(0, 0, w, h);
    }
}