diff --git a/index.html b/index.html
index f11876a..e809271 100644
--- a/index.html
+++ b/index.html
@@ -1110,16 +1110,24 @@ function Renderer (client) {
this.drawGrid = function () {
if (!this.showExtras) { return }
const markers = { w: parseInt(client.tool.settings.size.width / 15), h: parseInt(client.tool.settings.size.height / 15) }
+ this.context.beginPath()
+ this.context.lineWidth = 2
+ this.context.fillStyle = client.theme.active.b_med
for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) {
const isStep = x % 4 === 0 && y % 4 === 0
if (x === 0 || y === 0) { continue }
- this.drawMarker({
+ const pos = {
x: parseInt(x * 15),
y: parseInt(y * 15)
- }, isStep ? 2.5 : 1.5, client.theme.active.b_med)
+ }
+ const radius = isStep ? 2.5 : 1.5
+ this.context.moveTo(pos.x * this.scale, pos.y * this.scale)
+ this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
}
}
+ this.context.fill()
+ this.context.closePath()
}
this.drawRulers = function () {
if (!client.cursor.translation) { return }
@@ -1143,14 +1151,6 @@ function Renderer (client) {
}
this.drawPath(path, style)
}
- this.drawMarker = function (pos, radius = 1, color) {
- this.context.beginPath()
- this.context.lineWidth = 2
- this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
- this.context.fillStyle = color
- this.context.fill()
- this.context.closePath()
- }
this.drawVertex = function (pos, radius = 5) {
this.context.beginPath()
this.context.lineWidth = 2
diff --git a/scripts/renderer.js b/scripts/renderer.js
index 1794628..33fedb3 100644
--- a/scripts/renderer.js
+++ b/scripts/renderer.js
@@ -107,17 +107,25 @@ function Renderer (client) {
const markers = { w: parseInt(client.tool.settings.size.width / 15), h: parseInt(client.tool.settings.size.height / 15) }
+ this.context.beginPath()
+ this.context.lineWidth = 2
+ this.context.fillStyle = client.theme.active.b_med
for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) {
const isStep = x % 4 === 0 && y % 4 === 0
// Don't draw margins
if (x === 0 || y === 0) { continue }
- this.drawMarker({
+ const pos = {
x: parseInt(x * 15),
y: parseInt(y * 15)
- }, isStep ? 2.5 : 1.5, client.theme.active.b_med)
+ }
+ const radius = isStep ? 2.5 : 1.5
+ this.context.moveTo(pos.x * this.scale, pos.y * this.scale)
+ this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
}
}
+ this.context.fill()
+ this.context.closePath()
}
this.drawRulers = function () {
@@ -150,15 +158,6 @@ function Renderer (client) {
// Elements
- this.drawMarker = function (pos, radius = 1, color) {
- this.context.beginPath()
- this.context.lineWidth = 2
- this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
- this.context.fillStyle = color
- this.context.fill()
- this.context.closePath()
- }
-
this.drawVertex = function (pos, radius = 5) {
this.context.beginPath()
this.context.lineWidth = 2