Segítség canvas rajzok elkészítéséhez.

A weboldali rajzok canvas / svg és egyéb rajzok elkészítéséhez, nagy segítség egy px méretekre készített, háttérkép.
Természetesen használhatunk:
Négyzetrácsos (kockás) füzetet, melynél egy-egy négyzetrács méretét, 20x20px értéknek vegyük.
Milliméteres felosztású műszaki rajzlapot, ekkor a felosztásokat 1x1 px méretként alkalmazhatjuk.

De a legjobb segítség, px méretekre készített háttérkép, ekkor közvetlen a monitoron ellenőrizhetjük vagy határozhatjuk meg, rajzaink pozícióját.
Ebben segítek kezdőknek és haladóknak, de természetesen bárki alkalmazhatja az általam készített px méretekre készített képet, rajzaik elkészítéséhez.
Ez a px méretekre felosztott segédrajz, width=1600px height=1030px méretű, melyet nagyobb méretű monitorral rendelkezők is használhatnak.

Az 1600x1030 méretű segédrajzomat a következő címről hívhatjátok meg css fájlba, vagy a head szakaszban style meghatározásokhoz. A CSS fájlba vagy STYLE meghatározásnál, class osztályazonosítóhoz kell rendelni, így több canvas vagy tetszőleges rajzhoz is, háttérképként alkalmazhatjuk. Amikor a rajzunk elkészült, tiltsuk le a háttérképet, és csak a rajzaink lesznek láthatók.

A px felosztású segédraj meghívása és alkalmazása:

Másold ki a style meghatározást, és illeszt be, saját weboldaladra.
Teszthez, kimásolhatod a teljes leírási tartalmat is, és illeszt be, saját weboldaladra.


<head>
<style type="text/css">
.pxracs{padding-top:17px; padding-left:24px; background:url(https://www.wpaulina.hu/asztali/canvas/segedrajzok/pxjpgnracs1600x1030.jpg); }
</style>
</head>

<body>
<div class="pxracs" style="width:830px;">
<canvas id="minta" width="800" height="300" style="border:2px solid red;">
<h3>Ön böngészője, nem támogatja canvas elemet!<h3> </canvas>
</div>
     <script>
          var mrajz = document.getElementById('minta');
          var rajz = mrajz.getContext('2d');
               // Ide írjuk, a rajzhoz szükséges meghatározásokat.
          // Például:
          rajz.lineWidth = 4;
          rajz.strokeStyle = "rgb(0, 0, 250)";
          rajz.strokeRect(20, 20, 100, 100);
     </script>
</body>

Fenti meghatározások, megjelenő eredménye.

Tippek a háttérkép elhelyezéséhez

A canvas elem, rajzvászon fontos méret meghatározásai, a width és height méretek.
A meghatározott width és height méreteken kívül eső rajzok, nem jelennek meg.
A border / keret és háttérszín meghatározásra, nincs szükség.

A div class="pxracs" szakasznál, szélesség és magasság beállítása:
- height magassági méretet nem fontos meghatározni, ezt a canvas height mérete is meghatározza. De mindenki tetszésének megfelelően nagyobbra is állíthatja.
- width szélességi méretet a canvas width méreténél, 10-20px-el nagyobbra állítsuk be.
Ajánlott a width és height méreteket egységesen, 10-20px-el nagyobbra állítani, mint a canvas méretei.

A div class="pxracs" szakasznál, padding meghatározások:
Alapértelmezett értékei, a meghívási stílusnál meghatározottakkal egyenlő: padding-top:17px; padding-left:24px;
Ha a px rácsos háttérkép által mutatott pozícióvonalak, nem az általunk elvárt pozícióban vannak, akkor a div szakasznál is meghatározhatunk új padding értékeket, például így:
<div class="pxracs" style="width:830px; padding-top:18px; padding-left:25px;">

Az alapértelmezett padding értékektől eltérő értékeket, általában akkor kell megváltoztatni, ha a canvas vászon keretének vastagságát, 1px-nél nagyobbra állítjuk.

Remélem, hogy sok weboldali rajzot készítőnek nagy segítség lesz, az általam felajánlott px-es felosztású rajzom.

A segítségemet, azaz px háttérképemet felhasználók megtisztelnének azzal, hogy a saját weboldalukon, tetszőleges helyen, elhelyeznék az URL címet.
<a href="https://www.wpaulina.hu/asztali/canvas/index.html">Canvas rajzvászon témakörök.</a>

Minden weboldalam elején, látható a következő fotók valamelyike, vagy mindkettő:
A zöld nyílra kattintva, egy témakörrel visszafelé léphetünk.

A kutya fotójára kattintva, a fő témakörökre, vagy a kezdő oldalra jutunk, majd ezt követően,
tetszőleges kiválasztott témakört tekinthetünk meg.