start

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{*.html,*.css}]
+indent_style = tab
+indent_size = 4
+
+[*.js]
+indent_style = space
+indent_size = 2

CSS/README.md

@@ -0,0 +1,4 @@
+# CSS
+
+- [`@font-face`](font-face.css)
+- [Pixel Art](pixe-art.css)

CSS/font-face.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: 'MyWebFont';
+	src: url('webfont.eot'); /* IE9 Compat Modes */
+	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url('webfont.woff') format('woff'), /* Modern Browsers */
+	url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
+	url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
+}

CSS/pixel-art.css

@@ -0,0 +1,4 @@
+canvas {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}

JavaScript/README.md

@@ -0,0 +1,6 @@
+# JavaScript
+
+## Canvas
+- [Drawing text](drawing-text.js)
+- [measureText()](measureText.js) - возвращает информацию об измеренном тексте, например ширину
+- [`drawImage()`](canvas.drawImage.js) - метод Canvas 2D API рисования изображения на холсте

JavaScript/canvas.drawImage.js

@@ -0,0 +1,44 @@
+// void ctx.drawImage(image, dx, dy);
+// void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+// void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+
+// image
+//     Элемент для отображения в контексте.
+//     Функция принимает любой источник изображения, пригодный для отображения
+//     на холсте
+// dx
+//     Координата по оси Х, обозначающая стартовую точку холста-приёмника,
+//     в которую будет помещён верхний левый угол исходного image.
+// dy
+//     Координата по оси Y, обозначающая стартовую точку холста-приёмника,
+//     в которую будет помещён верхний левый угол исходного image.
+// dWidth
+//     Ширина изображения, полученного из исходного image.
+//     Эта опция позволяет масштабировать изображение по ширине.
+//     Если опция не задана, изображение не будет масштабировано.
+// dHeight
+//     Высота изображения, полученного из исходного image.
+//     Эта опция позволяет масштабировать изображение по высоте.
+//     Если опция не задана, изображение не будет масштабировано.
+// sx
+//     Координата по оси X верхнего левого угла фрагмента,
+//     который будет вырезан из изображения-источника и помещён в контекст-приёмник.
+// sy
+//     Координата по оси Y верхнего левого угла фрагмента,
+//     который будет вырезан из изображения-источника и помещён в контекст-приёмник.
+// sWidth
+//     Ширина фрагмента, который будет вырезан из изображения источника
+//     и помещён в контекст-приёмник. Если не задана, фрагмент от точки,
+//     заданной sx и sy до правого нижнего угла источника
+//     будет целиком скопирован в контекст-приёмник.
+// sHeight
+//     Высота фрагмента, который будет вырезан из изображения источника
+//     и помещён в контекст-приёмник.
+
+function Draw() {
+  let canvas = document.getElementById('canvas');
+  let ctx = canvas.getContext('2d');
+  let image = document.getElementById('source');
+
+  ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+}

JavaScript/drawing-text.js

@@ -0,0 +1,14 @@
+function Draw() {
+  let context = document.getElementById('canvas').getContext('2d');
+
+  // Styling text
+  // font = value
+  // textAlign = value | *start, end, left, right, center
+  // textBaseline = value | top, hanging, middle, *alphabetic, ideographic, bottom
+  // direction = value | ltr, rtl, *inherit
+
+  // fillText(text, x, y [, maxWidth])
+  // strokeText(text, x, y [, maxWidth])
+  context.font = '48px serif';
+  context.fillText('Hello world', 10, 50);
+}

JavaScript/measureText.js

@@ -0,0 +1,6 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let text = ctx.measureText('Hello world');
+console.log(text.width); // 56;
+