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

Styles.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.

Js

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, 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