Month: July 2022

Sometimes, we want to write text on an HTML5 canvas element with JavaScript.

In this article, we’ll look at how to write text on an HTML5 canvas element with JavaScript.

How to write text on an HTML5 canvas element with JavaScript?

To write text on an HTML5 canvas element with JavaScript, we call the fillText method.

For instance, we write

<canvas id="my-canvas" width="200" height="120"></canvas>

to add a canvas element.

Then we write

const canvas = document.getElementById("my-canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("hello", canvas.width / 2 - 17, canvas.height / 2 + 8);

to select the canvas with getElementById.

We get the canvas’ context with getContext.

And then we set the text style by setting the fillStyle property.

We set the font by setting the font property.

Finally, we call fillText to write the 'hello' at the given x and y coordinates.

Conclusion

To write text on an HTML5 canvas element with JavaScript, we call the fillText method.

Sometimes, we want to create a link using JavaScript.

In this article, we’ll look at how to create a link using JavaScript.

How to create a link using JavaScript?

To create a link using JavaScript, we use various DOM methods.

For instance, we write

const a = document.createElement("a");
const linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);

to call createElement to create an a element.

Then we call createTextNode to create a text node.

Next we call a.appendChild to append the linkText text node to the a element.

We set the title attribute of the a element by setting the a.title property.

And we set the href attribute of the a element by setting the a.href property.

Finally, we call document.body.appendChild with a to append a as the last child of the body element.

Conclusion

To create a link using JavaScript, we use various DOM methods.

Sometimes, we want to wrap a react-router Link in an HTML button with JavaScript.

In this article, we’ll look at how to wrap a react-router Link in an HTML button with JavaScript.

How to wrap a react-router Link in an HTML button with JavaScript?

To wrap a react-router Link in an HTML button with JavaScript, we create a component.

For instance, we write

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

const LinkButton = (props) => {
  const { history, location, match, staticContext, to, onClick, ...rest } =
    props;
  return (
    <button
      {...rest}
      onClick={(event) => {
        onClick && onClick(event);
        history.push(to);
      }}
    />
  );
};

LinkButton.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
};

export default withRouter(LinkButton);

to create the LinkButton component that calls onClick if it’s defined when we click on the button.

And we call history.push toi navigate to the to URL.

We call withRouter with LinkButton to add the history prop to the component.

We then use it by writing

<LinkButton
  to="/path/to/page"
  onClick={(event) => {
    console.log("custom event here!", event);
  }}
>
  Push My Buttons
</LinkButton>

to add the button.

Conclusion

To wrap a react-router Link in an HTML button with JavaScript, we create a component.