Composer symlink for packages

I cross around the net and could not find fast the solution for using package locally instead of passing by packagist(satis, any other hub).

Let’s imagine the situation when you have project and bundle you code yourself for it. …


How to add dynamic effects to your canvas elements?

We ll build this animation

Html

<html lang="en">
<head>
<title>Canvas Animation</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>

Style

#c {
border: 1px solid…


How to handle key on your Canvas?

It’s pretty simply to listen to your keys; you listen to the event with the name ‘keydown’ and than you just need to find the right key code.

Html

<html lang="en">
<head>
<title>Canvas Keys</title>
<meta charset="UTF-8">…


How to handle mouse events on your Canvas?

Possible Mouse Events on Canvas

  • mousedown / mouseup
  • mouseover / mouseout
  • mousemove
  • click
  • dbclick

Html

<html lang="en">
<head>
<title>Canvas Mouse Events</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script> …


How to add an image to your canvas?

Prepare our HTML

<html lang="en">
<head>
<title>Canvas Image</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c" width="800" height="600">
This is a message for old browsers
</canvas>

<script src="script.js"></script>
</body>
</html>

Style.css

#c {
border: 1px solid…


How to add some text and style it on my Canvas?

Let’s see what we can do with the text on our canvas.

Html with style.scss and script.js

<html lang="en">
<head>
<title>Canvas Text</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas…


How to add shadows to your Canvas Elements?

In this lesson we learn how to add shadows to our lessons.

Our Html code with script.js & style.css

<html lang="en">
<head>
<title>Canvas Shadows</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="c"…


Canvas circle primitive and example of what we can do with it

It’s time to learn how to work with circles. But the basic primitives it’s too boring, so we ll create a pacman :)

Arc

Let’s draw our first arc. We can do that with arc function

context.arc(x, y, radius…

Best useful services to use for creative creation

Our top 4 sites we use in our work


Google embed iframe

It’s pretty simple to add the Google Maps embed iframe to your site

There are a lot of free Google Maps iframe generators. But pay attention, the most of them add theirs logo to iframe, that’s not cool.

In my case, I used this site.

Anton Lytvynov

Senior web developer, architect, cryptocurrencies trader, https://lytvynov-anton.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store