質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
86.12%
canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Fabric.jsを使用してcanvasを複数設置したいが、二つめのcanvasにレイヤーが作成されない

coool
coool

総合スコア27

canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

1クリップ

239閲覧

投稿2022/09/08 07:51

編集2022/09/09 06:20

実現したいこと

GASを利用したwebページ作成の一環で、canvasを利用し自由描画とテキストのみ配置の二種類のスペースを作成したいです。
できればFabric.jsを使用していきたいです。

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

一つ目の自由描画のcanvasは問題なく動作しますが、二つ目のテキスト配置のcanvasは配置したテキストが表示されません。

試したこと

Chromeの開発ツールでみてみると、id:csnvas-finalの方は.lower-canvasと.upper-canvasどちらの要素も加わっておらず、レイヤーが作成されていない状況になります。
classm名を分けてもだめでした。

該当のソースコード

HTML&Jquery

<!DOCTYPE html> <html> <head> <base target="_top"> <?!=HtmlService.createHtmlOutputFromFile('css.html').getContent(); ?> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> <!---HTML5 canvasのフレームワーク---> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script> </head> <body> <div> <br> <center> <h1>自由描画ウィンドウ</h1> <label style="font-size: 20px; color: red;"> <input id="drawing" type="checkbox" checked><b>編集</b></label><br><br> <div style="padding:10px"> <button id="delete" style="display:none">選択範囲削除</button> </div> <canvas id="canvas-id" width="800" height="400" class="canvas1"></canvas> <div style="padding:10px"> <button type="button" onclick="chgImg()" value="1">画像変換</button> <h2>画像出力欄</h2> <div id="img-box"><img id="newImg"></div> </div> <h1>テキスト</h1> <canvas id="canvas-final" width="800" height="1000" class="canvas2"></canvas> </div> </div> <script> const buttonOpen = document.getElementById('modalOpen'); const modal = document.getElementById('easyModal'); const buttonClose = document.getElementsByClassName('modalClose')[0]; /*---------------------------------- 自由描画スクリプト -----------------------------------*/ //htmlで作ったcanvas要素をidで指定して、canvasオブジェクトを生成。 const canvas = new fabric.Canvas("canvas-id"); //フリードローイングを可能にする canvas.isDrawingMode = true; //ペンサイズの設定 canvas.freeDrawingBrush.width = 5; // 描画する線の太さ document.getElementById("drawing").addEventListener("click", function () { canvas.isDrawingMode = canvas.isDrawingMode ? false : true; canvas.discardActiveObject(); canvas.requestRenderAll(); }); fabric.Object.prototype.set({ borderScaleFactor: 6 }); //オブジェクトを選択してデリートを行う const deleteBtn = document.getElementById("delete"); deleteBtn.addEventListener("click", function () { deleteSelectedObjects(); }); canvas.on("selection:created", function () { deleteBtn.style.display = "inline-block"; }); canvas.on("selection:cleared", function () { deleteBtn.style.display = "none"; }); function deleteSelectedObjects() { var selection = canvas.getActiveObjects(); selection.forEach((obj) => { canvas.remove(obj); }); canvas.requestRenderAll(); } document.addEventListener("keyup", function (e) { console.log(e.keyCode); if (e.keyCode == 8 | e.keyCode == 46) { deleteSelectedObjects(); } }); //初期値(サイズ、色、アルファ値)の決定 var defSize = 2, defColor = "#555"; //フリードローイングを可能にする canvas.isDrawingMode = true; //初期値(サイズ、色、アルファ値)の決定 var defSize = 7, defColor = "#555"; //モーダルコンテンツ以外がクリックされた時 addEventListener('click', outsideClose); function outsideClose(e) { if (e.target == modal) { modal.style.display = 'none'; }; }; //バツ印がクリックされた時 buttonClose.addEventListener('click', modalClose); function modalClose() { modal.style.display = 'none'; }; function chgImg() { var png = canvas.toDataURL(); document.getElementById("newImg").src = png; } function initLocalStorage() { myStorage.setItem("__log", JSON.stringify([])); } function setLocalStoreage() { var png = canvas.toDataURL(); var logs = JSON.parse(myStorage.getItem("__log")); setTimeout(function () { logs.unshift({ 0: png }); myStorage.setItem("__log", JSON.stringify(logs)); currentCanvas = 0; temp = []; }, 0); } /*---------------------------------- テキスト -----------------------------------*/ var canvasf = new fabric.Canvas('canvas-final'); var textObj = new fabric.Text('Hello Text!', { fontFamily: 'Delicious_500', left: 400, top: 225, fontSize: 80, textAlign: "left", fill: "#FF0000" // Set text color to red }); canvasf.add(textObj); </script> </main> </body> </html>

CSS

<style> header { background: #fff; } body { font-family: "Open Sans", sans-serif; line-height: 1.25; } canvas { border: 3px solid #000; } </style>

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。