🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

2回答

1296閲覧

[Glitch] glitchではcanvasモジュールが使えない?

退会済みユーザー

退会済みユーザー

総合スコア0

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2019/12/21 01:46

編集2019/12/21 01:48

前提・実現したいこと

glitchでdisocrd.jsを利用したbotの開発に取り組んでいるのですが、
canvasのモジュールをインクルードしても、エラーが発生します。
どうすれば改善するでしょうか?よろしくお願いします。

発生している問題・エラーメッセージ

Error: Cannot find module 'canvas' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15) at Function.Module._load (internal/modules/cjs/loader.js:508:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (/app/main.js:12:16) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3)

該当のソースコード

12行目:main.js

javascript

1const Canvas = require('canvas');

package.json

json

1{ 2 "name": "(省略)", 3 "version": "0.0.0", 4 "description": "Discord.js", 5 "main": "main.js", 6 "dependencies": { 7 "discord.js": "^11.5.1", 8 "canvas": "^2.6.1" 9 }, 10 "devDependencies": {}, 11 "scripts": { 12 "start": "node main.js", 13 "test": "node main.js" 14 } 15}

試したこと

glitchの不具合かと思い、再起動しましたが一向に直る気配がありません。

補足情報(FW/ツールのバージョンなど)

glitch

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

glitch.comでしたら普通にcanvasは使用できますよ
package.json内の「Add Package」から検索欄にcanvasと打って上にcanvasのパッケージが出てくるのでそれを押して使用します。

ついでにコードサンプルです。

js

1const Canvas = require("canvas"); 2 3~ 4 5const canvas = Canvas.createCanvas(960, 540); 6const ctx = canvas.getContext("2d"); 7 8ctx.fillStyle = "#FFFFFF"; 9ctx.fillRect(0, 0, canvas.width, canvas.height); 10 11<channel>.send({ 12 files: [ 13 { 14 attachment: canvas.toBuffer(), 15 name: "test.png" 16 } 17 ] 18});

投稿2020/04/18 09:57

Zel

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

yuta0801さんの指摘、Zelさんの回答で誤りとわかったため、削除扱いに変更します
js~~ ~~require('glitch-canvas');~~ ~~
を使っている人が居ましたので試してみて下さい

投稿2019/12/21 09:25

編集2020/04/20 02:03
oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuta0801

2020/04/19 22:39

軽く調べてみたところglitch-canvasはglitchで使うためのcanvasライブラリではなく、glitchという画像効果をcanvasで使用するためのライブラリなので、サービスであるglitchは直接関係ないため、画像効果などをつける必要がないのであれば必要なさそうです
oikashinoa

2020/04/20 02:00 編集

yuta0801さん指摘ありがとうございます。 質問者さんのエラーの原因が気になるところですが…質問者さん見てるのかな。追加で試したことorどこかソースを修正したら治ったのなら追加情報欲しいですね。 ...あっ質問者さん 退会してた。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問