window.onload = () => { const canvas = document.querySelector('#canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const context = canvas.getContext('2d'); let mouseData, container, isFocusCheckEnbled = true; function disableFocusCheck() { isFocusCheckEnbled = false; } class Container { constructor() { this.children = []; this.childMTop = 18; } appendChild(c) { this.children.push(c); } init(ctx) { let nextY = this.childMTop; this.children.forEach((c) => { c.setX((canvas.width - c.w) / 2); c.setY(nextY); nextY += c.h + this.childMTop; }); canvas.height = nextY; } draw(ctx, mouse) { this.children.forEach(c => c.draw(ctx)); } update(mouse) { this.children.forEach(c => c.update(mouse)); } } class ButtonRect { constructor(w, h, r, bgColor, focusColor) { this.x = 0; this.y = 0; this.w = w; this.h = h; this.setR(r); this.currentColor = this.bgColor = bgColor; this.focusColor = focusColor; } setR(r) { if (typeof r === 'number') { this.rTopLeft = this.rTopRight = this.rBottomRight = this.rBottomLeft = r; } else { [this.rTopLeft, this.rTopRight, this.rBottomRight, this.rBottomLeft] = r; } } setX(x) { this.x = x; } setY(y) { this.y = y; } draw(ctx, customStyle = null) { if (this.w < 2 * this.r) { this.r = this.w / 2; } if (this.h < 2 * this.r) { this.r = this.h / 2; } if (customStyle) { ctx.fillStyle = customStyle; } else { ctx.fillStyle = this.currentColor; } ctx.beginPath(); ctx.moveTo(this.x + this.rTopLeft, this.y); ctx.arcTo(this.x + this.w, this.y, this.x + this.w, this.y + this.h, this.rTopRight); ctx.arcTo(this.x + this.w, this.y + this.h, this.x, this.y + this.h, this.rBottomRight); ctx.arcTo(this.x, this.y + this.h, this.x, this.y, this.rBottomLeft); ctx.arcTo(this.x, this.y, this.x + this.w, this.y, this.rTopLeft); ctx.closePath(); return ctx; } isFocused(mouse) { return (this.x <= mouse.x && this.x + this.w >= mouse.x) && (this.y <= mouse.y && this.y + this.h >= mouse.y); } onFocus() { if (this.focusColor) { this.currentColor = this.focusColor; } } onBlur() { if (this.bgColor) { this.currentColor = this.bgColor; } } } class Label { constructor(text, font) { this.text = text; this.font = font; } setX(x) { this.x = x; } setY(y) { this.y = y; } draw(ctx) { ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#FAFAFA'; ctx.font = this.font; ctx.fillText(this.text, this.x, this.y); } } class AbstractButton { constructor(w, h, r, bgColor) { this.w = w; this.h = h; this.r = r; this.bgColor = bgColor; this.readyToMouseDown = false; this.readyToDispatchEvent = false; this.eventCanBeDispatched = false; } setLabel(label) { this.label = label; } isFocused(mouse) { return (this.x <= mouse.x && this.x + this.w >= mouse.x) && (this.y <= mouse.y && this.y + this.h >= mouse.y); } processFocused(mouse) { if (this.isFocused(mouse)) { if (!mouse.down && !this.readyToMouseDown) { this.readyToMouseDown = true; } else if (mouse.down && (this.readyToMouseDown || !isFocusCheckEnbled)) { this.readyToDispatchEvent = true; } else if (!mouse.down && this.readyToDispatchEvent && !this.eventCanBeDispatched) { this.eventCanBeDispatched = true; } else if (this.eventCanBeDispatched) { this.readyToDispatchEvent = false; this.eventCanBeDispatched = false; } } else { this.readyToMouseDown = false; this.readyToDispatchEvent = false; } } dispatchEvent(mouse) { if (this.eventCanBeDispatched) { this.callback(); } } onClick(callback) { this.callback = callback; } update(mouse) { this.processFocused(mouse); this.dispatchEvent(mouse); this.doUpdate(mouse); } } class ButtonFlat extends AbstractButton { constructor(w, h, r, bgColor, focusColor, gradientColor) { super(w, h, r, bgColor); this.rect = new ButtonRect(w, h, r, bgColor, focusColor); this.focusColor = focusColor; this.gradientRadius = 0.9 * (w > h ? w : h); this.gradientColorRGB = hexToRgb(gradientColor); this.gradientsParams = []; this.opacityVelocity = 3; this.gradientVelocity = 6; this.areMouseCoordsSet = false; } setX(x) { this.x = x; const xCenter = (2 * this.x + this.w) / 2; this.rect.setX(x); this.label.setX(xCenter); } setY(y) { this.y = y; const yCenter = (2 * this.y + this.h) / 2; this.rect.setY(y); this.label.setY(yCenter); } draw(ctx) { ctx.fillStyle = this.currentColor; ctx.shadowBlur = 2; ctx.shadowOffsetY = 1; ctx.shadowColor = '#212121'; this.rect.draw(ctx).fill(); ctx.shadowBlur = 0; ctx.shadowOffsetY = 0; this.gradientsParams.forEach(gradientParams => { const gradient = this.createGradient(ctx, gradientParams); this.rect.draw(ctx, gradient).fill(); }); this.label.draw(ctx); return ctx; } createGradient(ctx, params) { const gradient = ctx.createRadialGradient(...params.gradient); gradient.addColorStop(0, `rgba(${this.gradientColorRGB}, ${params.opacity / 100})`); gradient.addColorStop(1, `rgba(${this.gradientColorRGB}, 0)`); return gradient; } addGradientParams(mouse) { const params = { gradient: [mouse.x, mouse.y, 10, mouse.x, mouse.y, 15], opacity: 50, }; this.gradientsParams.push(params); } updateGradient(g) { if (g.gradient[5] < this.gradientRadius) { g.gradient[2] += this.gradientVelocity; g.gradient[5] += this.gradientVelocity; if (g.gradient[5] / this.gradientRadius > 0.6) { g.opacity -= this.opacityVelocity * 0.5; } } else if (g.opacity > 0 && !this.areMouseCoordsSet) { g.opacity -= this.opacityVelocity; } } doUpdate(mouse) { this.gradientsParams.forEach(params => this.updateGradient(params)); this.gradientsParams = this.gradientsParams.filter(params => params.opacity > 0); if (this.isFocused(mouse)) { this.rect.onFocus(); } else { this.rect.onBlur(); } if (mouse.down && this.isFocused(mouse)) { if (!this.areMouseCoordsSet) { this.areMouseCoordsSet = true; this.addGradientParams(mouse); } } else { this.areMouseCoordsSet = false; } } } class Button3D extends AbstractButton { constructor(w, h, r, bgColor, shadowColor, focusColor) { const gap = 6; super(w, h + gap, r, bgColor); this.gap = gap; this.buttonTop = new ButtonRect(w, h, r, bgColor, focusColor); this.buttonBottom = new ButtonRect(w, h, r, shadowColor); // Made by Igor Makarsky } setX(x) { this.x = x; this.buttonTop.setX(x); this.buttonBottom.setX(x); const xCenter = (this.buttonTop.x + this.buttonTop.x + this.buttonTop.w) / 2; this.label.setX(xCenter); } setY(y) { this.y = y; this.buttonTop.setY(y); this.buttonBottom.setY(y + this.gap); const yCenter = (this.buttonTop.y + this.buttonTop.y + this.buttonTop.h) / 2; this.label.setY(yCenter); } draw(ctx) { this.buttonBottom.draw(ctx).fill(); this.buttonTop.draw(ctx).fill(); this.label.draw(ctx); } doUpdate(mouse) { if (this.isFocused(mouse)) { this.buttonTop.onFocus(); } else { this.buttonTop.onBlur(); } if (mouse.down && this.isFocused(mouse)) { if (this.buttonTop.y < this.buttonBottom.y) { this.buttonTop.y += this.gap; this.label.y += this.gap; } } else if (this.buttonTop.y > this.buttonBottom.y - this.gap) { this.buttonTop.y -= this.gap; this.label.y -= this.gap; } } } class Button3DSmooth extends Button3D { constructor(w, h, r, bgColor, shadowColor, focusColor) { super(w, h, r, bgColor, shadowColor, focusColor); this.isPushed = false; this.velocity = 1; } doUpdate(mouse) { if (this.isFocused(mouse)) { this.buttonTop.onFocus(); } else { this.buttonTop.onBlur(); } if ((mouse.down && this.isFocused(mouse)) || this.isPushed) { this.isPushed = true; if (this.buttonTop.y < this.buttonBottom.y) { this.buttonTop.y += this.velocity; this.label.y += this.velocity; } else { this.isPushed = false; } } else { if (this.buttonTop.y > this.buttonBottom.y - this.gap) { this.buttonTop.y -= this.velocity; this.label.y -= this.velocity; } } } } class ButtonConvex extends AbstractButton { constructor(w, h, r, bgColor, bgLightShadow, bgDarkShadow, focusColor) { super(w, h, r, bgColor); const shadowWidth = 10; this.buttonTop = new ButtonRect(w - shadowWidth, h - shadowWidth, r, bgColor, focusColor); this.fakeTop = new ButtonRect(w - shadowWidth, h - shadowWidth, r / 2, bgColor, focusColor); this.shadowRect = new ButtonRect(w - shadowWidth / 2, h - shadowWidth / 2, [r, r * 0.5, r, r * 0.5], bgDarkShadow); this.buttonBottom = new ButtonRect(w, h, r, bgLightShadow); this.shadowWidth = shadowWidth; this.isPushed = false; this.velocity = 0.9; } setX(x) { this.x = x; this.buttonBottom.setX(x); this.buttonTop.setX(x + this.shadowWidth / 2); this.shadowRect.setX(this.buttonTop.x); this.fakeTop.setX(this.buttonTop.x); const xCenter = (this.buttonBottom.x + this.buttonBottom.x + this.buttonBottom.w) / 2; this.label.setX(xCenter); } setY(y) { this.y = y; this.buttonBottom.setY(y); this.buttonTop.setY(y + this.shadowWidth / 2); this.shadowRect.setY(this.buttonTop.y); this.fakeTop.setY(this.buttonTop.y); const yCenter = (this.buttonBottom.y + this.buttonBottom.y + this.buttonBottom.h) / 2; this.label.setY(yCenter); } draw(ctx) { ctx.lineWidth = 0.5; ctx.strokeStyle = this.buttonTop.bgColor; this.buttonBottom.draw(ctx).fill(); this.buttonBottom.draw(ctx).stroke(); this.shadowRect.draw(ctx).fill(); this.fakeTop.draw(ctx).fill(); this.buttonTop.draw(ctx).fill(); ctx.lineWidth = 1; // back to default this.label.draw(ctx); return ctx; } doUpdate(mouse) { if ((mouse.down && this.isFocused(mouse)) || this.isPushed) { this.isPushed = true; if (this.buttonTop.y > this.buttonBottom.y) { this.buttonTop.y -= this.velocity; this.buttonTop.x -= this.velocity; this.buttonTop.w += this.velocity * 2; this.buttonTop.h += this.velocity * 2; } else { this.isPushed = false; } } else { if (this.buttonTop.y < this.buttonBottom.y + this.shadowWidth / 2) { this.buttonTop.y += this.velocity; this.buttonTop.x += this.velocity; this.buttonTop.w -= this.velocity * 2; this.buttonTop.h -= this.velocity * 2; } } } } function init() { mouseData = { x: 0, y: 0, down: false }; container = new Container(); const button1 = new Button3DSmooth(180, 80, 18, '#E64A19', '#BF360C', '#F4511E'); const label1 = new Label('Click me', '24px Comic Sans MS'); button1.setLabel(label1); button1.onClick(() => console.log(`"${label1.text}" is clicked`)); container.appendChild(button1); const button2 = new Button3D(300, 42, 20, '#1976D2', '#0D47A1', '#1E88E5'); const label2 = new Label('CONTINUE', '16px Nunito, sans-serif'); button2.setLabel(label2); button2.onClick(() => console.log(`"${label2.text}" is clicked`)); container.appendChild(button2); const button3 = new ButtonFlat(180, 54, 6, '#009688', '#26A69A', '#B2DFDB'); const label3 = new Label('BUY', '18px Arial'); button3.setLabel(label3); button3.onClick(() => console.log(`"${label3.text}" is clicked`)); container.appendChild(button3); const button4 = new ButtonConvex(66, 66, 12, '#4CAF50', '#81C784', '#388E3C', '#66BB6A'); const label4 = new Label('OK', '18px Nunito, sans-serif'); button4.setLabel(label4); button4.onClick(() => console.log(`"${label4.text}" is clicked`)); container.appendChild(button4); container.init(context); container.draw(context); } function setPos({ layerX, layerY }) { [mouseData.x, mouseData.y] = [layerX, layerY]; } function isDown({ layerX, layerY }) { [mouseData.x, mouseData.y] = [layerX, layerY]; mouseData.down = true; } function isUp({ layerX, layerY }) { [mouseData.x, mouseData.y] = [layerX, layerY]; mouseData.down = false; } function setMovePos(e) { // const touch = e.changedTouches[0]; // [mouseData.x, mouseData.y] = [touch.pageX, touch.pageY]; // mouseData.down = true; [mouseData.x, mouseData.y] = [0, 0]; mouseData.down = false; } function onTouchStart(e) { disableFocusCheck(); const touch = e.changedTouches[0]; [mouseData.x, mouseData.y] = [touch.pageX, touch.pageY]; mouseData.down = true; } function onTouchEnd(e) { if (![mouseData.x, mouseData.y].includes(0)) { const touch = e.changedTouches[0]; [mouseData.x, mouseData.y] = [touch.pageX, touch.pageY]; mouseData.down = false; } } function loop() { context.clearRect(0, 0, canvas.width, canvas.height); container.update(mouseData); container.draw(context); window.requestAnimationFrame(loop); } function resize() { canvas.width = window.innerWidth; container.init(context); // If height stretching is needed: // canvas.height = window.innerHeight; } canvas.addEventListener('mousemove', setPos); canvas.addEventListener('mousedown', isDown); canvas.addEventListener('mouseup', isUp); canvas.addEventListener('touchmove', setMovePos); canvas.addEventListener('touchstart', onTouchStart); canvas.addEventListener('touchend', onTouchEnd); window.addEventListener('resize', resize); init(); loop(); }; function hexToRgb(hex) { const rbg = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b) .substring(1).match(/.{2}/g) .map(x => parseInt(x, 16)) .join(', '); return rbg; }

Animated buttons with canvas