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


And we start with 4 elements we ll use later

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 :)

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

So these lines

give us a circle

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.

How to manage your project? What Application to chose? Free sites?

Our top 5 management sites you can start use for free

Build a simple Canvas Chess board

Let’s build a simple chess board with Canvas primitives

The basic HTML with script.js and style.css.

Our canvas has 800x800 dimension.


Now, the most interesting part. Drawing process

We define two colors we ll use everywhere.

Initial board with two cells

Let’s go deeper in understanding the basic primitives and what we can do with them

Let’s draw a rectangle and fill it

To fill the element we should use these two lines

Fill rectangle example

Canvas primitives

Let’s start from something really easy.

This is our basic html with style.css and script.js

Note here the DOM element Canvas.

Our style

Our initial canvas

How to run php files on Nginx? PhpFpm & FastCgi

This article based on two previous

The simple answer is

Your Nginx server does not know how to trait .php

Our site configuration file from the previous guide updated with lines 9 and 20–27

Multiple virtual hosts with Nginx

Sites-available and sites-enabled permits you easily work with multiple sites and hosts on your local machine.

After the installation of Nginx I did not have sites-available and sites-enabled folders.

Anton Lytvynov

Senior web developer, architect, cryptocurrencies trader,

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