HTML Canvas Practice

---

Recently I learned how to use html canvas tag. After reading a bit of MDN, I built a simple position detect page. User can draw a line by clicking and when user click the start point, the line turns into red line and user no longer can draw line until user click the reset button.

Below is the JavaScript code for this small project and preview of the project.

const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");

const resetButton = document.querySelector("button");

ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);

let coordinates = [];
let line = new Path2D();
ctx.lineWidth = 5;
ctx.strokeStyle = "white";


const appendNewLine = (x, y) => {
  if (coordinates.length <= 0) {
    return line.moveTo(x, y);
  }
  const {x:prevX, y:prevY} = coordinates[coordinates.length - 1];
  const newLine = new Path2D();
  newLine.moveTo(prevX, prevY);
  newLine.lineTo(x, y);
  line.addPath(newLine);
  ctx.stroke(line);
};

const addDot = (x, y) => {
  const newDot = new Path2D();
  newDot.arc(x, y, 5, 0, Math.PI * 2, true);
  ctx.fillStyle = "white";
  ctx.fill(newDot);
  appendNewLine(x, y);
  coordinates.push({
    x,
    y,
  });
}

const isReturnToStart = (x, y) => {
  if (coordinates.length > 0) {
    const {x:startX, y:startY} = coordinates[0];
    if (x <= startX + 5 && x >= startX - 5) {
      if (y <= startY + 5 && y >= startY - 5) return true;
    }
  }
  return false;
}

const drawLine = (e) => {
  if (isReturnToStart(e.offsetX, e.offsetY)) {
    appendNewLine(coordinates[0].x, coordinates[0].y);
    ctx.strokeStyle = "red";
    ctx.stroke(line);
    console.log(coordinates);
    return e.target.removeEventListener("click", drawLine);
  }
  addDot(e.offsetX, e.offsetY);
}

const resetCanvas = () => {
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
  line = new Path2D();
  ctx.lineWidth = 5;
  ctx.strokeStyle = "white";
  coordinates = [];
  canvas.addEventListener("click", drawLine);  
}

resetButton.addEventListener("click", resetCanvas);

canvas.addEventListener("click", drawLine);

You can see a Demo in here :D

Read More

I made a simple markdown editor with vanilla javascript

you can use this markdown editor in here!

Making a Markdown Editor with JavaScript

Two days ago, I started to make a custom markdown editor with JavaScript. Today in this blog post, I want to share the making process so that the other people who want to make their own custom markdown editor will get som help in this article.

Experiment : try to make it work with repl

I spent most of my time in repl project file when I was trying to find basic blueprint and logic of this editor that I want to make. I strongly recommend for the other people to do it as well. It doesn't matter if you're using repl or codepen or something else. This kind of services make our project easy to test, especially when your project is a combination of HTML, CSS and JS. Below is the repl code for this project. You can just directly learn from a code, or you can read the summary of the techniques that I needed for this project which I will explain at the bottom.

repl page : https://repl.it/@SooYoungKim/markdown-editor#index.html

keep in mind that repl code is not a final code, final code is in my github code

Vanilla JavaScript techniques that helped me a LOT

These are the techniques and JavaScript methods that I learned this time. I guess if there's someone who want to make a markdown editor, I think he or she will also need these kind of techniques.

• div tag and contenteditable attribute

• window.getSelection()

• anchorNode

• focusNode

• removeAllRanges()

• addRange()

• document.createRange()

• setStart()

• setEnd()

• collapse()

• surroundContents

• insertNode

• deleteContents

• event.keyCode

• String

• String.match()

• String.replace(),

• RegExp

• String.indexOf()

• String.lastIndexOf()

• a tag download attribute, encodeURIComponent()

• parentNode.insertBefore()

• childNode.after()

Above techniques are the core techniques that helped me to build this markdown editor. You can google it each concept, or you can come back later when you want to add certain functionality but don't know how to.

Finally, I put it on to React project

Someone told me before that I should not directly use DOM inside of an React project. I understand what they're trying to say. But at the current moment, I have absolutely no idea how to implement this vanilla JS project to React style(using state, hooks etc but not pure DOM). However, I'm planning to use this editor on more big scale personal project and there're good chances that I will use React. So, I turned into React project, but still using DOM directly. I guess I can figure it out how to code them more "Reactfully" later on.

If anyone who want to see the code, or want to help me with the react code, I'll leave a github address, and deployed URL.

github code

you can use this markdown editor in here!

Read More